如何使用 Ant Design 在 React 中隐藏侧边栏

Question

我正在尝试做一个侧边栏，它会在单击导航栏中的图标时隐藏。而且我不想使用类，也许我这样做是错误的，但我想尽可能地保留它。我有一个错误提示：

（属性）折叠：布尔值';'预期的.ts(1005)

在 const 切换中：

const state = {
    collapsed: true
  };

const toggle = () => {
    state.collapsed: !state.collapsed
};


const Sidebar = () => {

  return (
    <Layout.Sider collapsed={state.collapsed} style={{ backgroundColor: '#f0f0f0' }}>
     ...
    </Layout.Sider>
  )
}

在导航栏中我得到了这个：

<Button
            type="primary"
            shape="circle"
            icon="user"
            size={'small'}
            style={{ marginLeft: '10px' }}
            onClick={() => toggle}
          />

我的布局：

const Layout = ({ children }: LayoutProps) => {
  return (
    <AntdLayout>
      <AntdLayout>
        <Header />
      </AntdLayout>
      <div>{children}</div>
      <Sidebar />
    </AntdLayout>
  )
}

谢谢大家！

Answer 1

我在您的代码中发现了两个问题。如果你有功能组件，你可以使用useState 来更新boolean 状态。另一个是你如何使用onClick={() => toggle}，技术上你不是调用函数，只是返回。

我认为您可以尝试以下方法 - 使用状态挂钩创建布尔变量：

const Sidebar = () => {
   const [collapsed, setCollapsed] = useState(true);

   return (
      <Layout.Sider collapsed={state.collapsed} style={{ backgroundColor: '#f0f0f0' }}>
         ...
      </Layout.Sider>
   )
}

在按钮中，您可以使用如下 - 切换 collapsed 变量的值：

<Button type="primary"
        shape="circle"
        icon="user"
        size={'small'}
        style={{ marginLeft: '10px' }}
        onClick={() => setCollapsed(!collapsed)} />

在此处进一步阅读：

1. State hook
2. Function and Class components

如果您对进一步感兴趣，我之前在 GitHub 上准备了一个存储库，用于展示类、功能或样式组件中的切换元素。在这里找到它：norbitrial/react-toogle-class-on-click

我希望这会有所帮助！