docs: 修复导出组件示例报错 close #3059

antvis · Jan 2, 2025 · 8d877a4 · 8d877a4
1 parent d0b812d
commit 8d877a4
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 8 deletions.
diff --git a/s2-site/docs/manual/advanced/get-instance.zh.md b/s2-site/docs/manual/advanced/get-instance.zh.md
@@ -9,6 +9,10 @@ order: 8
 
 对于使用 `React` 组件 `SheetComponent` 这一类场景，如果需要获取到 [表格实例](/api/basic-class/spreadsheet)，进行一些进阶操作时，可以使用 `React.useRef` 和 `onMounted` 进行获取。
 
+:::info{title="注意"}
+表格是异步渲染，需要在 `onMounted` 后才能拿到最新的实例。
+:::
+
 ### 使用
 
 ```tsx
@@ -29,13 +33,40 @@ function App() {
 }
 ```
 
+### 搭配组件使用
+
+如果需要搭配其他**依赖 S2 实例**的组件使用时，由于 Ref 不会触发组件重新渲染，可以使用 `React.useState` 保存实例，保证组件正常更新。[查看示例](/examples/react-component/export/#export)
+
+```tsx
+import React from 'react'
+import { SpreadSheet } from '@antv/s2'
+import { SheetComponent } from '@antv/s2-react'
+import { Export } from '@antv/s2-react-components';
+
+function App() {
+  const [sheetInstance, setSheetInstance] = React.useState<SpreadSheet>();
+
+  const onMounted = (s2: SpreadSheet) => {
+    setSheetInstance(s2);
+  };
+
+  return (
+    <>
+      <Export sheetInstance={sheetInstance} />
+      <SheetComponent onMounted={onMounted}/>
+    </>
+  )
+}
+
+```
+
 ### 组件形态变更时实例更新
 
 `S2` 提供了 `透视表`, `明细表` 等表形态，对于 `SheetComponent` 组件 对应 `sheetType` 属性
 
 ```tsx
 function App() {
-  // pivot 透视表，table: 明细表
+  // pivot: 透视表，table: 明细表
   return (
     <SheetComponent sheetType="pivot" />
   )

diff --git a/s2-site/examples/react-component/export/demo/export-strategy.tsx b/s2-site/examples/react-component/export/demo/export-strategy.tsx
@@ -31,13 +31,17 @@ const s2Options: SheetComponentOptions = {
 };
 
 function App({ dataCfg }) {
-  const s2Ref = React.useRef<SpreadSheet>();
+  const [sheetInstance, setSheetInstance] = React.useState<SpreadSheet>();
+
+  const onMounted = (s2: SpreadSheet) => {
+    setSheetInstance(s2);
+  };
 
   return (
     <>
       <Space style={{ marginBottom: 12 }}>
         <StrategyExport
-          sheetInstance={s2Ref.current}
+          sheetInstance={sheetInstance}
           onCopySuccess={(data) => {
             console.log('copy success:', data);
           }}
@@ -49,7 +53,7 @@ function App({ dataCfg }) {
         sheetType="strategy"
         dataCfg={dataCfg}
         options={s2Options}
-        ref={s2Ref}
+        onMounted={onMounted}
       />
       ,
     </>

diff --git a/s2-site/examples/react-component/export/demo/export.tsx b/s2-site/examples/react-component/export/demo/export.tsx
@@ -19,16 +19,20 @@ const s2Options: SheetComponentOptions = {
 };
 
 function App({ dataCfg }) {
-  const s2Ref = React.useRef<SpreadSheet>();
+  const [sheetInstance, setSheetInstance] = React.useState<SpreadSheet>();
+
+  const onMounted = (s2: SpreadSheet) => {
+    setSheetInstance(s2);
+  };
 
   return (
     <>
       <Space style={{ marginBottom: 12 }}>
-        <Export sheetInstance={s2Ref.current}>
+        <Export sheetInstance={sheetInstance}>
           <Button>自定义导出按钮</Button>
         </Export>
         <Export
-          sheetInstance={s2Ref.current}
+          sheetInstance={sheetInstance}
           onCopySuccess={(data) => {
             console.log('copy success:', data);
           }}
@@ -43,7 +47,11 @@ function App({ dataCfg }) {
           }}
         />
       </Space>
-      <SheetComponent dataCfg={dataCfg} options={s2Options} ref={s2Ref} />
+      <SheetComponent
+        dataCfg={dataCfg}
+        options={s2Options}
+        onMounted={onMounted}
+      />
     </>
   );
 }