From 0a5c844479b1f6c108b1a2414d5848872d30b844 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chiaki=E6=9E=AB=E7=83=A8?=
 <66824170+Chiaki-xps@users.noreply.github.com>
Date: Thu, 26 Dec 2024 12:04:04 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8Del=E4=B8=8D=E5=AD=98?=
 =?UTF-8?q?=E5=9C=A8=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/editor/components/SelectedMask/index.tsx     | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/lowcode-editor/src/editor/components/SelectedMask/index.tsx b/lowcode-editor/src/editor/components/SelectedMask/index.tsx
index 8abff0c..836db1d 100644
--- a/lowcode-editor/src/editor/components/SelectedMask/index.tsx
+++ b/lowcode-editor/src/editor/components/SelectedMask/index.tsx
@@ -76,9 +76,15 @@ function SelectedMask({ containerClassName, portalWrapperClassName, componentId
     });
   }
 
-  const el = useMemo(() => {
-      return document.querySelector(`.${portalWrapperClassName}`)!
-  }, []);
+  const [el, setEl] = useState(
+    document.querySelector(`.${portalWrapperClassName}`)
+  );
+
+  useEffect(() => {
+    if (!el) {
+      setEl(document.querySelector(`.${portalWrapperClassName}`));
+    }
+  });
 
   const curSelectedComponent = useMemo(() => {
     return getComponentById(componentId, components);

From d94ad217a0931ef1b84f9c6db64b71b4bcee1559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chiaki=E6=9E=AB=E7=83=A8?=
 <66824170+Chiaki-xps@users.noreply.github.com>
Date: Thu, 26 Dec 2024 12:21:53 +0800
Subject: [PATCH 2/2] =?UTF-8?q?el=20=E4=B8=8D=E5=AD=98=E5=9C=A8=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/components/SelectedMask/index.tsx  | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/lowcode-editor/src/editor/components/SelectedMask/index.tsx b/lowcode-editor/src/editor/components/SelectedMask/index.tsx
index 836db1d..4abe575 100644
--- a/lowcode-editor/src/editor/components/SelectedMask/index.tsx
+++ b/lowcode-editor/src/editor/components/SelectedMask/index.tsx
@@ -108,44 +108,46 @@ function SelectedMask({ containerClassName, portalWrapperClassName, componentId
 
   }, [curComponent]);
 
-  return createPortal((
-    <>
-      <div
-        style={{
-          position: "absolute",
-          left: position.left,
-          top: position.top,
-          backgroundColor: "rgba(0, 0, 255, 0.1)",
-          border: "1px dashed blue",
-          pointerEvents: "none",
-          width: position.width,
-          height: position.height,
-          zIndex: 12,
-          borderRadius: 4,
-          boxSizing: 'border-box',
-        }}
-      />
-      <div
+  return (
+    el &&
+    createPortal(
+      <>
+        <div
           style={{
-            position: "absolute",
+            position: 'absolute',
+            left: position.left,
+            top: position.top,
+            backgroundColor: 'rgba(0, 0, 255, 0.1)',
+            border: '1px dashed blue',
+            pointerEvents: 'none',
+            width: position.width,
+            height: position.height,
+            zIndex: 12,
+            borderRadius: 4,
+            boxSizing: 'border-box',
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
             left: position.labelLeft,
             top: position.labelTop,
-            fontSize: "14px",
+            fontSize: '14px',
             zIndex: 13,
-            display: (!position.width || position.width < 10) ? "none" : "inline",
+            display: !position.width || position.width < 10 ? 'none' : 'inline',
             transform: 'translate(-100%, -100%)',
           }}
         >
           <Space>
             <Dropdown
               menu={{
-                items: parentComponents.map(item => ({
+                items: parentComponents.map((item) => ({
                   key: item.id,
                   label: item.desc,
                 })),
                 onClick: ({ key }) => {
                   setCurComponentId(+key);
-                }
+                },
               }}
               disabled={parentComponents.length === 0}
             >
@@ -155,7 +157,7 @@ function SelectedMask({ containerClassName, portalWrapperClassName, componentId
                   backgroundColor: 'blue',
                   borderRadius: 4,
                   color: '#fff',
-                  cursor: "pointer",
+                  cursor: 'pointer',
                   whiteSpace: 'nowrap',
                 }}
               >
@@ -170,14 +172,16 @@ function SelectedMask({ containerClassName, portalWrapperClassName, componentId
                   cancelText={'取消'}
                   onConfirm={handleDelete}
                 >
-                  <DeleteOutlined style={{ color: '#fff' }}/>
+                  <DeleteOutlined style={{ color: '#fff' }} />
                 </Popconfirm>
               </div>
             )}
           </Space>
         </div>
-    </>
-  ), el)
+      </>,
+      el
+    )
+  );
 }
 
 export default SelectedMask;