javascript - 无法使用 ChakraUI 中的 useDisclosure() 在同一页面上使用两个模态

Question

chakraUI 提供了一个自定义挂钩 useDisclosure() ，它返回isOpen、onClose、onOpen。

  const { isOpen, onOpen, onClose } = useDisclosure()

onOpen被传递给被触发以打开模式的按钮的 onClick 。

<Modal isOpen={isOpen} onClose={onClose}>
  ...Modal Code...
<Modal/>

<Button onClick={onOpen}>
  button
<Button/>

现在我想在同一页面上制作另一个模式（比如说reportModal）。为此，我编写了相同的代码，在解构 useDisclosure() 时重命名了变量。

const {
        isOpen: { isOpenReportModal },
        onOpen: { onOpenReportModal },
        onClose: { onCloseReportModal },
      } = useDisclosure() 

此外，我通过将这些重命名的变量传递给组件来使用相同的流程，但 id 不起作用。

任何人的解决方案？提前感谢...

Answer 1

您必须像这样重命名变量。

 const { 
    isOpen: isOpenReportModal, 
    onOpen: onOpenReportModal, 
    onClose: onCloseReportModal 
} = useDisclosure()

现在这应该可以了。你所尝试的就像再次解构。这是错误的。