据我所知,一旦你设置了rootMargin:"0px",这意味着当你选择的元素在屏幕上完全可见并且相对于视口或任何相关元素有 0px 的边距时,就会产生效果。
在Threshold 属性中,它的值从 0% 到 100% 也表示为 0 到 1。这意味着如果该值为 1,则一旦元素在视口上 100% 可见,回调就会运行。
请强调它们之间的差异。
chakraUI 提供了一个自定义钩子 useDisclosure() ,它返回isOpen, onClose , onOpen。
const { isOpen, onOpen, onClose } = useDisclosure()
Run Code Online (Sandbox Code Playgroud)
该的OnOpen被传递到被触发开启模式按钮的onclick。
<Modal isOpen={isOpen} onClose={onClose}>
...Modal Code...
<Modal/>
<Button onClick={onOpen}>
button
<Button/>
Run Code Online (Sandbox Code Playgroud)
现在我想在同一页面上创建另一个模态(比如 reportModal)。为此,我编写了相同的代码,在解构 useDisclosure() 时重命名变量。
const {
isOpen: { isOpenReportModal },
onOpen: { onOpenReportModal },
onClose: { onCloseReportModal },
} = useDisclosure()
Run Code Online (Sandbox Code Playgroud)
此外,我通过将这些重命名的变量传递给和组件来使用相同的流程,但 id 不起作用。
任何人的解决方案?提前致谢...