From 8e1ce9909f777ed02e836323ad04c6c1e5c274db Mon Sep 17 00:00:00 2001
From: ClarkXia <xiawenwu41@gmail.com>
Date: Fri, 8 Mar 2024 17:14:50 +0800
Subject: [PATCH] feat: props mountId to support react18

---
 packages/icestark-module/src/MicroModule.tsx | 20 ++++++++++++--------
 packages/icestark-module/src/modules.tsx     |  2 +-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/icestark-module/src/MicroModule.tsx b/packages/icestark-module/src/MicroModule.tsx
index f9608d4c..5ff129cf 100644
--- a/packages/icestark-module/src/MicroModule.tsx
+++ b/packages/icestark-module/src/MicroModule.tsx
@@ -52,14 +52,14 @@ export default class MicroModule extends React.Component<any, State> {
 
   componentDidUpdate(prevProps) {
     const { moduleInfo: preModuleInfo = {}, ...preRest } = prevProps;
-    const { moduleInfo: curModuleInfo = {}, ...curRest } = this.props;
+    const { moduleInfo: curModuleInfo = {}, mountId, ...curRest } = this.props;
 
     if (!shallowCompare(preModuleInfo, curModuleInfo)) {
       this.mountModule();
     }
     if (!shallowCompare(preRest, curRest)) {
       // 对于除 moduleInfo 外的 props 更新，重新渲染模块
-      this.moduleLifecycleMount && this.moduleLifecycleMount(this.moduleComponent, this.mountNode, curRest);
+      this.moduleLifecycleMount && this.moduleLifecycleMount(this.moduleComponent, this.mountNode || mountId, curRest);
     }
   }
 
@@ -114,8 +114,8 @@ export default class MicroModule extends React.Component<any, State> {
             unmoutModule(this.moduleInfo, this.mountNode);
           } else {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { sandbox, moduleInfo, wrapperClassName, wrapperStyle, loadingComponent, handleError, ...rest } = this.props;
-            lifecycleMount(component, this.mountNode, rest);
+            const { sandbox, moduleInfo, wrapperClassName, wrapperStyle, loadingComponent, handleError, mountId, ...rest } = this.props;
+            lifecycleMount(component, this.mountNode || mountId, rest);
           }
         }
       } catch (err) {
@@ -134,14 +134,18 @@ export default class MicroModule extends React.Component<any, State> {
     const { loading } = this.state;
     const { render } = this.moduleInfo || {};
 
-    const { wrapperClassName, wrapperStyle, loadingComponent, ...restProps } = this.props;
+    const { wrapperClassName, wrapperStyle, loadingComponent, mountId, ...restProps } = this.props;
+    const nodeProps = {
+      className: wrapperClassName,
+      style: wrapperStyle,
+      ref: (ref) => { this.mountNode = ref; },
+      ...(mountId ? { id: mountId } : {}),
+    };
     return loading
       ? loadingComponent
       : (
         <div
-          className={wrapperClassName}
-          style={wrapperStyle}
-          ref={(ref) => { this.mountNode = ref; }}
+          {...nodeProps}
         >
           { this.moduleInfo && this.validateRender() && render(restProps) }
         </div>
diff --git a/packages/icestark-module/src/modules.tsx b/packages/icestark-module/src/modules.tsx
index d342ac11..5d2c70de 100644
--- a/packages/icestark-module/src/modules.tsx
+++ b/packages/icestark-module/src/modules.tsx
@@ -168,7 +168,7 @@ export function appendCSS(
 
 export function removeCSS(name: string, node?: HTMLElement | Document, removeList?: string[]) {
   const linkList: NodeListOf<HTMLElement> = (node || document).querySelectorAll(
-    `link[module=${name}]`,
+    `link[module="${name}"]`,
   );
   linkList.forEach((link) => {
     // check link href if it is in remove list