我创建了一个简单的应用来解决我在切换侧边栏时遇到的问题。我正在尝试使用 onClicks 以便我可以打开和关闭侧边栏，但无法使其正常工作。我正在使用样式组件，无论出于何种原因，我都无法切换侧边栏。我有一个简单的状态，isOpen，它被初始化为 false，当我单击“导航栏”中的按钮时，我希望它通过 onClick 将状态切换为 true，并且侧边栏应该出现，并且但是，它不起作用。
这里是密码箱link
我尝试从头开始重新编写应用程序，使用解构与不使用解构，并查找代码中的任何错误，但找不到。关于下一步我可以尝试什么的任何想法？我还确保我的 onClicks 使用箭头函数。
【问题讨论】：
你的代码有两个问题
onClick={toggle} 或 onClick={() => toggle()}
position:fixed 和 opacity:0 并覆盖整个屏幕）因此修复 1，然后将侧边栏移至其他位置（以免重叠）或将其 display 从 none 更改为 block 而不是不透明度。
【讨论】：
我看到的第一个问题是SidebarContainer 正在创建一个覆盖层，阻止单击按钮打开它。您需要更改从SidebarElements 导出的SidebarContainer 上的visibility 属性：
visibility: ${(props) => (props.isOpen ? "visible" : "hidden")};
我更喜欢使用visibility 属性而不是将display 设置为block 或none，因为如果您愿意，您可以为opacity 或transform 等属性设置动画或过渡。当切换display 属性时，您的侧边栏会立即出现和消失。
另外，从Sidebar 和Navbar 内部调用toggle 时不需要使用匿名回调：
<CloseIcon onClick={toggle}>X</CloseIcon>
<OpenIcon onClick={toggle}>open sidebar</OpenIcon>
我已经更新了你提供的sandbox link。
【讨论】：