在父组件和子组件上使用 Chakra-UI useDisclosure 钩子

如何解决在父组件和子组件上使用 Chakra-UI useDisclosure 钩子

我试图在两个不同的组件中使用 Chakra UI useDisclosure hook。基本上，我有一个带有按钮的父组件和一个带有不同按钮的子组件。我想在父组件中使用 onToggle，在子组件中使用 onClose -- 并且让它们都控制子组件上 isOpen 的状态。这可能吗？如果是这样，如何？ 谢谢。

解决方法

您可以在父组件中使用钩子 useDisclosure，然后将状态 isOpen 和 onClose 传递给您的子组件：

function Parent() {
  const { isOpen,onToggle,onClose } = useDisclosure()

  return (
    <>
      <Button onClick={onToggle}>Open Drawer</Button>
      <Child isOpen={isOpen} onClose={onClose} /> 
    </>
  )
}