From 85be69df5ed461967ce05b09254313ee06a5c8c6 Mon Sep 17 00:00:00 2001
From: zhouyun <zhouyun1@xiaomi.com>
Date: Wed, 25 Dec 2024 20:43:22 +0800
Subject: [PATCH] =?UTF-8?q?chore(provider):=20=E4=BF=AE=E6=94=B9=E7=A4=BA?=
 =?UTF-8?q?=E4=BE=8B=20(#3074)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/provider/stories/portal.stories.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/ui/provider/stories/portal.stories.tsx b/packages/ui/provider/stories/portal.stories.tsx
index 2fa300edc..6f7ee761b 100644
--- a/packages/ui/provider/stories/portal.stories.tsx
+++ b/packages/ui/provider/stories/portal.stories.tsx
@@ -7,10 +7,6 @@ import Space from '@hi-ui/space'
 import { createMessage } from '@hi-ui/message'
 import { createNotification } from '@hi-ui/notification'
 
-// 声明为全局变量
-let message = createMessage()
-let notification = createNotification()
-
 /**
  * @title 设置 portal
  * @desc 通过 Provider 设置 portal，可以将 Drawer、Modal 等组件的弹出层渲染在特定的 DOM 节点下
@@ -20,12 +16,14 @@ export const Portal = () => {
   const [modalVisible, setModalVisible] = React.useState(false)
   const [container, setContainer] = React.useState<HTMLElement | null>(null)
 
-  React.useEffect(() => {
-    if (!container) return
+  const message = React.useMemo(() => {
+    if (!container) return createMessage()
+    return createMessage({ container })
+  }, [container])
 
-    // message 和 notification 可通过这种方式挂载到指定容器上
-    message = createMessage({ container })
-    notification = createNotification({ container })
+  const notification = React.useMemo(() => {
+    if (!container) return createNotification()
+    return createNotification({ container })
   }, [container])
 
   return (
@@ -67,7 +65,6 @@ export const Portal = () => {
           </Space>
           {/* 必须设置一个拥有定位的父元素，组件显示在该元素内 */}
           <div
-            id="custom-container"
             ref={setContainer}
             className="drawer-container__wrap"
             style={{