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

如何解决无法在 ChakraUI 中使用 useDisclosure() 在同一页面上使用两个模态

chakraUI 提供了一个自定义钩子 usedisclosure()，它返回 isOpen、onClose、onopen。

df = (pd.DataFrame(L)
        .set_index(0)
        .isna()
        .mean(level=0)
        .add_prefix('field_')
        .rename_axis(None)
        .T)
print (df)
         domain1  domain2
field_1      0.5      0.0
field_2      0.5      0.0
field_3      0.0      1.0
field_4      0.5      0.0

onopen 被传递给触发打开模态的按钮的 onClick。

  const { isOpen,onopen,onClose } = usedisclosure()

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

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

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

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

有人寻求解决方案吗？提前致谢...

解决方法

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

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

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