diff --git a/packages/x6-react-shape/package.json b/packages/x6-react-shape/package.json index 136cb1a5188..5b2d130c0a6 100644 --- a/packages/x6-react-shape/package.json +++ b/packages/x6-react-shape/package.json @@ -1,6 +1,6 @@ { "name": "@antv/x6-react-shape", - "version": "2.0.4", + "version": "2.0.5", "description": "X6 shape for rendering react components.", "main": "lib/index.js", "module": "es/index.js", @@ -39,8 +39,8 @@ }, "peerDependencies": { "@antv/x6": "^2.x", - "react": "^18.0.0", - "react-dom": "^18.0.0" + "react": ">=16.8.6 || >=17.0.0 || >=18.0.0", + "react-dom": ">=16.8.6 || >=17.0.0 || >= 18.0.0" }, "devDependencies": { "@antv/x6": "^2.x", diff --git a/packages/x6-react-shape/src/view.ts b/packages/x6-react-shape/src/view.ts index 7b8afbd54d9..284b2524c5b 100644 --- a/packages/x6-react-shape/src/view.ts +++ b/packages/x6-react-shape/src/view.ts @@ -1,11 +1,14 @@ -import React, { ReactPortal } from 'react' -import { createPortal } from 'react-dom' -import { createRoot, Root } from 'react-dom/client' +import React, { ReactPortal, version as reactVersion } from 'react' +import ReactDOM, { createPortal } from 'react-dom' +import type { Root, createRoot as CreateRoot } from 'react-dom/client' import { Dom, NodeView } from '@antv/x6' import { ReactShape } from './node' import { Portal } from './portal' import { Wrap } from './wrap' +const [, major] = /^(\d+)\.\d+\.\d+$/.exec(reactVersion)! +const reactMajor = Number(major) +const isPreEighteen = reactMajor < 18 export class ReactShapeView extends NodeView { root?: Root @@ -31,16 +34,28 @@ export class ReactShapeView extends NodeView { const portal = createPortal(elem, container) as ReactPortal Portal.connect(this.cell.id, portal) } else { - const root = createRoot(container) - root.render(elem) + if (isPreEighteen) { + ReactDOM.render(elem, container) + } else { + // eslint-disable-next-line + const createRoot = require('react-dom/client') + .createRoot as typeof CreateRoot + this.root = createRoot(container) + this.root.render(elem) + } } } } protected unmountReactComponent() { - if (this.root) { - this.root.unmount() - this.root = undefined + const container = this.getComponentContainer() + if (container) { + if (isPreEighteen) { + ReactDOM.unmountComponentAtNode(container) + } else if (this.root) { + this.root.unmount() + this.root = undefined + } } }