在 React 中切换侧边栏

Question

我创建了一个简单的应用程序来解决我在切换边栏时遇到的问题。我正在尝试使用 onClicks 以便我可以打开和关闭侧边栏，但无法让它工作。我正在使用样式化组件，但出于某种原因我无法切换侧边栏。我有一个简单的状态，isOpen，它被初始化为 false，当我点击 'navbar' 中的按钮时，我希望它通过 onClick 将状态切换为 true，侧边栏应该出现, 然而，它不起作用。

这里是codesandboxlink

我尝试从头开始重写应用程序，使用解构与不使用解构，并查找代码中的任何错误但没有找到。我接下来可以尝试什么有什么想法吗？我还确保为我的 onClicks 使用箭头函数。

Answer 1

我看到的第一个问题是 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。

Answer 2

你的代码有两个问题

1. 当您应该像 onClick={toggle} 或 onClick={() => toggle()}
那样称呼它时，您却像 onClick={() => toggle} 那样称呼切换开关
2. 您的“侧边栏”与您的导航栏重叠（它是 position:fixed 和 opacity:0 并覆盖整个屏幕）

因此修复 1，然后将侧边栏移动到别处（以免重叠）或将其 display 从 none 更改为 block 而不是不透明度。