antd 左右滑动_如何使用reactjs创建可滑动的侧边栏

要实现可滑动的侧边栏，可以使用 Ant Design 的 Layout 组件。具体步骤如下：

1. 引入 Layout 组件

首先，在组件中引入 Layout 组件：

import { Layout } from 'antd';
const { Sider, Content } = Layout;

2. 创建 Sider 和 Content

使用 Sider 组件创建侧边栏，使用 Content 组件创建主内容区域。例如：

<Layout>
  <Sider width={200} style={{ background: '#fff' }}>
    左侧菜单
  </Sider>
  <Content style={{ padding: '0 24px', minHeight: 280 }}>
    主内容区域
  </Content>
</Layout>

其中，Sider 的 width 属性设置侧边栏宽度，Content 的 style 属性设置主内容区域样式。

3. 设置 Sider 的可滑动

为了使 Sider 可以滑动，需要为其添加 trigger 和 collapsible 属性。例如：

<Sider width={200} style={{ background: '#fff' }} trigger={null} collapsible collapsed={this.state.collapsed}>
  左侧菜单
</Sider>

其中，trigger={null} 表示隐藏默认的 trigger，collapsible 表示是否可收缩，collapsed 则表示是否默认收缩。

4. 设置 trigger

如果需要显示自定义的 trigger，可以在 Sider 中添加一个按钮，并设置 trigger={this.trigger()}，其中 trigger() 返回一个函数，用于切换侧边栏的收缩状态。

<Sider width={200} style={{ background: '#fff' }} trigger={this.trigger()} collapsible collapsed={this.state.collapsed}>
  左侧菜单
</Sider>

trigger = () => {
  return (
    <div onClick={this.toggle}>
      <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
    </div>
  );
};

toggle = () => {
  this.setState({
    collapsed: !this.state.collapsed,
  });
};

这样就可以创建一个可滑动的侧边栏了。