diff --git a/packages/react-vtable/demo/src/component/custom-layout-dom-site-1.tsx b/packages/react-vtable/demo/src/component/custom-layout-dom-site-1.tsx index c4256eb2a..01c20fbcd 100644 --- a/packages/react-vtable/demo/src/component/custom-layout-dom-site-1.tsx +++ b/packages/react-vtable/demo/src/component/custom-layout-dom-site-1.tsx @@ -1,4 +1,5 @@ import { useEffect, useRef, useState } from 'react'; +import ReactDOM from 'react-dom/client'; import type { CustomLayoutFunctionArg } from '../../../src'; import { ListTable, ListColumn, CustomLayout, Group, Text, Tag, Image } from '../../../src'; import { @@ -168,6 +169,7 @@ function App() { // eslint-disable-next-line no-undef // (window as any).tableInstance = table; }} + ReactDOM={ReactDOM} > diff --git a/packages/react-vtable/demo/src/component/custom-layout-dom-site.tsx b/packages/react-vtable/demo/src/component/custom-layout-dom-site.tsx index cfe3c1a14..7191c10e9 100644 --- a/packages/react-vtable/demo/src/component/custom-layout-dom-site.tsx +++ b/packages/react-vtable/demo/src/component/custom-layout-dom-site.tsx @@ -1,5 +1,6 @@ /* eslint-disable max-len */ import { useEffect, useRef, useState } from 'react'; +import ReactDOM from 'react-dom/client'; import type { CustomLayoutFunctionArg } from '../../../src'; import { ListTable, ListColumn, CustomLayout, Group, Text, Tag, Image } from '../../../src'; import { Avatar, Button, Card, Popover, Space, Typography } from '@arco-design/web-react'; @@ -210,6 +211,7 @@ function App() { // eslint-disable-next-line no-undef // (window as any).tableInstance = table; }} + ReactDOM={ReactDOM} > diff --git a/packages/react-vtable/demo/src/component/custom-layout-dom.tsx b/packages/react-vtable/demo/src/component/custom-layout-dom.tsx index eaf069bfc..b74f63dd7 100644 --- a/packages/react-vtable/demo/src/component/custom-layout-dom.tsx +++ b/packages/react-vtable/demo/src/component/custom-layout-dom.tsx @@ -1,4 +1,5 @@ import { useEffect, useRef, useState } from 'react'; +import ReactDOM from 'react-dom/client'; import type { CustomLayoutFunctionArg } from '../../../src'; import { ListTable, ListColumn, CustomLayout, Group, Text, Tag, Image } from '../../../src'; import { Avatar, Button, Card, Popover, Space, Typography } from '@arco-design/web-react'; @@ -296,6 +297,7 @@ function App() { // eslint-disable-next-line no-undef (window as any).tableInstance = table; }} + ReactDOM={ReactDOM} > diff --git a/packages/react-vtable/src/index.ts b/packages/react-vtable/src/index.ts index 9f2eccb9f..a8295390a 100644 --- a/packages/react-vtable/src/index.ts +++ b/packages/react-vtable/src/index.ts @@ -1,7 +1,5 @@ -import * as VTable from '@visactor/vtable'; - export * from './tables'; export * from './components'; -export { VTable }; +export * from './vtable'; export const version = __VERSION__; diff --git a/packages/react-vtable/src/tables/base-table.tsx b/packages/react-vtable/src/tables/base-table.tsx index e48678cbe..079f7c395 100644 --- a/packages/react-vtable/src/tables/base-table.tsx +++ b/packages/react-vtable/src/tables/base-table.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/display-name */ -import * as VTable from '@visactor/vtable'; +// import * as VTable from '@visactor/vtable'; +import { VTable } from '../vtable'; import React, { useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react'; -import ReactDOM from 'react-dom/client'; import type { ContainerProps } from '../containers/withContainer'; import withContainer from '../containers/withContainer'; import type { TableContextType } from '../context/table'; @@ -46,6 +46,8 @@ export interface BaseTableProps extends EventsProps { height?: number; skipFunctionDiff?: boolean; + ReactDOM?: any; + /** 表格渲染完成事件 */ onReady?: (instance: IVTable, isInitial: boolean) => void; /** throw error when chart run into an error */ @@ -159,9 +161,9 @@ const BaseTable: React.FC = React.forwardRef((props, ref) => { vtable = new VTable.ListTable(props.container, parseOption(props)); } // vtable.scenegraph.stage.enableReactAttribute(ReactDOM); - vtable.scenegraph.stage.reactAttribute = ReactDOM; + vtable.scenegraph.stage.reactAttribute = props.ReactDOM; vtable.scenegraph.stage.pluginService.register(new VTableReactAttributePlugin()); - vtable.scenegraph.stage.params.ReactDOM = ReactDOM; + vtable.scenegraph.stage.params.ReactDOM = props.ReactDOM; tableContext.current = { ...tableContext.current, table: vtable }; isUnmount.current = false; }, diff --git a/packages/react-vtable/src/vtable.ts b/packages/react-vtable/src/vtable.ts new file mode 100644 index 000000000..552cc5503 --- /dev/null +++ b/packages/react-vtable/src/vtable.ts @@ -0,0 +1,3 @@ +import * as VTable from '@visactor/vtable'; + +export { VTable };