Skip to content

Commit

Permalink
chore(provider): 修改示例 (#3074)
Browse files Browse the repository at this point in the history
  • Loading branch information
zyprepare authored Dec 25, 2024
1 parent a5463bd commit 85be69d
Showing 1 changed file with 7 additions and 10 deletions.
17 changes: 7 additions & 10 deletions packages/ui/provider/stories/portal.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 节点下
Expand All @@ -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 (
Expand Down Expand Up @@ -67,7 +65,6 @@ export const Portal = () => {
</Space>
{/* 必须设置一个拥有定位的父元素,组件显示在该元素内 */}
<div
id="custom-container"
ref={setContainer}
className="drawer-container__wrap"
style={{
Expand Down

0 comments on commit 85be69d

Please sign in to comment.