Question

我正在尝试使用React Hooks创建一个可重复使用的画布侧边栏组件。

现在，我可以在一个文件中全部创建它，就像这样：

...
const Sidebar = props => {
  const [showSidebar, setSidebar] = useState(true)

  return (
    ...
      <Button onClick={() => setSidebar(!showSidebar)}>Click Me</Button>
      ...
      {showSidebar && <Box align="center" justify="center" {...props} />}
    ...
  )
}

但这不是我想要做的。它迫使我将Button组件作为Sidebar组件的一部分。我想要的是可以自由地将按钮组件放置在我想要的任何位置，并且仍然可以在侧边栏上进行切换。像这样：

...
const SomeCompoment = props => {
  const [showSidebar, setSidebar] = useState(true)

  return (
    ...
      <Button onClick={() => setSidebar(!showSidebar)}>Click Me</Button>
      ...
      <Sidebar>Sidebar Content</Sidebar>
    ...
  )
}

但是，我不知道如何使它工作。我需要一种将按钮上的单击与边栏的特定实例相关联的方法。

此外，我不想每次都想使用补充工具栏组件时都使用{showSidebar && ...}逻辑。我希望该逻辑包含在补充工具栏组件本身中。

有什么想法吗？

使用React挂钩创建可重用的侧边栏画布外组件

0 个答案: