Reactjs 在React中切换侧栏

我创建了一个简单的应用程序来解决我正在切换侧边栏的问题。我正在尝试使用onClicks，这样我就可以打开和关闭一个边栏，但却无法让它工作。我使用的是样式化组件，无论出于什么原因，我都无法让边栏切换。我有一个简单的状态，isOpen，它被初始化为false，当我点击“导航栏”中的一个按钮时，我希望它通过onClick将状态切换为true，侧边栏应该出现，但它不起作用

这是代码沙盒

---

我尝试从头开始重新编写应用程序，使用了解构与不使用解构，并在代码中查找了任何bug，但没有。我下一步可以试试什么？此外，我还确保在onclick中使用箭头功能。

我看到的第一个问题是，

侧边栏容器

正在创建一个覆盖，以防止单击按钮打开它。您需要更改从

SidebarElements

导出的

SidebarContainer

上的

visibility

属性：

可见性：${（props）=>（props.isOpen？“可见”：“隐藏”）

我更喜欢使用
visibility
属性，而不是将
display
设置为
block
或
none
，因为如果需要，可以设置动画或转换属性，如
opacity
或
transform
。切换
显示
属性时，侧边栏将立即出现并消失

另外，当从
侧栏和
导航栏内部调用
切换时，不需要使用匿名回调：

X

打开侧栏

我已更新了您提供的。您的代码有两个问题

当您应该像
onClick={toggle}
或
onClick={toggle}
或
onClick={（）=>toggle（）}
您的“侧边栏”与导航栏重叠（它是
位置：固定的
不透明度：0
并覆盖整个屏幕）

因此，修复1，然后将侧边栏移到其他位置（以避免重叠），或者将其
显示
从
none
更改为
块
，而不是不透明度