Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(provider): 修改示例 #3074

Merged
merged 1 commit into from
Dec 25, 2024
Merged

chore(provider): 修改示例 #3074

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions packages/ui/provider/stories/portal.stories.tsx
View file
Open in desktop
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
Loading