feat: support react17 in customLayout function

VisActor · Feb 7, 2025 · 74af0b1 · 74af0b1
1 parent 68a81be
commit 74af0b1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/common/changes/@visactor/vtable/feat-react-17_2025-02-07-12-01.json b/common/changes/@visactor/vtable/feat-react-17_2025-02-07-12-01.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vtable",
+      "comment": "feat: support react17 in customLayout function",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vtable"
+}
diff --git a/packages/react-vtable/src/table-components/custom/vtable-react-attribute-plugin.ts b/packages/react-vtable/src/table-components/custom/vtable-react-attribute-plugin.ts
@@ -46,7 +46,7 @@ export class VTableReactAttributePlugin extends ReactAttributePlugin {
       container = checkFrozenContainer(graphic);
     }
 
-    if (!(element && ReactDOM && ReactDOM.createRoot)) {
+    if (!(element && ReactDOM && (ReactDOM.createRoot || ReactDOM.render))) {
       return;
     }
     const id = isNil(react.id) ? `${graphic.id ?? graphic._uid}_react` : react.id;
@@ -60,18 +60,36 @@ export class VTableReactAttributePlugin extends ReactAttributePlugin {
       const { wrapContainer, nativeContainer } = this.getWrapContainer(stage, container);
 
       if (wrapContainer) {
-        const root = ReactDOM.createRoot(wrapContainer);
-        root.render(element);
-
         if (!this.htmlMap) {
           this.htmlMap = {};
         }
 
-        this.htmlMap[id] = { root, wrapContainer, nativeContainer, container, renderId: this.renderId, graphic };
+        if (ReactDOM.createRoot) {
+          const root = ReactDOM.createRoot(wrapContainer);
+          root.render(element);
+          this.htmlMap[id] = { root, wrapContainer, nativeContainer, container, renderId: this.renderId, graphic };
+        } else {
+          ReactDOM.render(element, wrapContainer);
+
+          this.htmlMap[id] = {
+            wrapContainer,
+            nativeContainer,
+            container,
+            renderId: this.renderId,
+            unmount: () => {
+              ReactDOM.unmountComponentAtNode(wrapContainer);
+            },
+            graphic
+          };
+        }
       }
     } else {
       // update react element
-      this.htmlMap[id].root.render(element);
+      if (ReactDOM.createRoot) {
+        this.htmlMap[id].root.render(element);
+      } else {
+        ReactDOM.render(element, this.htmlMap[id].wrapContainer);
+      }
     }
 
     if (!this.htmlMap || !this.htmlMap[id]) {