如何使用 Ant Design 的响应式 Sider 避免内容回流

Question

我希望响应式 Sider 组件能够在不导致内容组件中元素回流的情况下扩展，而我的渲染方法并非如此，如下所示。

import 'antd/dist/antd.css';

// ...skipped

render() {
  return (
    <Layout>
      <Sider
        breakpoint="sm"
        collapsedWidth="0"
        onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
        style={{ minHeight: "100vh" }}
      >
        <Menu theme="dark" mode="inline" selectedKeys={['1']}>
          <Menu.Item key="1">
            <Icon type="user" />
            <span className="nav-text">nav 1</span>
          </Menu.Item>
          <Menu.Item key="2">
            <Icon type="video-camera" />
            <span className="nav-text">nav 2</span>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: '10px', padding: "15px" }}>
          <ListOfData />
        </Content>
      </Layout>
    </Layout>
  );
}

我想要实现的是当使用移动视图端口访问时，在Ant Design 的文档站点中应用的 Sider 效果，该效果在视觉上将页面内容推送到右侧。

我用反应检查工具查看了上面提到的站点，但我不知道使用哪个官方组件来执行此操作。但是，我猜它混合了 Ant Design Mobile 中的 Drawer 组件，因为那里有 drawer 类。

是否可以仅使用 Ant Design 中的组件来实现这一目标？

我想要的是

我倒塌的 Sider

我的扩展侧边

Answer 1

您可以使用 lib rc-drawer-menu

\n\n

<Drawer width="240px">\n      <Menu\n        style={{ width: 240, height: \'200%\' }}\n        defaultSelectedKeys={[\'1\']}\n        defaultOpenKeys={[\'sub1\']}\n        mode="inline"\n      >\n        <SubMenu\n          key="sub1"\n          title={<span><Icon type="mail" /><span>Navigation One</span></span>}\n        >\n          <MenuItemGroup key="g1" title="Item 1">\n            <Menu.Item key="1">Option 1</Menu.Item>\n            <Menu.Item key="2">Option 2</Menu.Item>\n          </MenuItemGroup>\n          <MenuItemGroup key="g2" title="Item 2">\n            <Menu.Item key="3">Option 3</Menu.Item>\n            <Menu.Item key="4">Option 4</Menu.Item>\n          </MenuItemGroup>\n        </SubMenu>\n        <SubMenu\n          key="sub2"\n          title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}\n        >\n          <Menu.Item key="5">Option 5</Menu.Item>\n          <Menu.Item key="6">Option 6</Menu.Item>\n          <SubMenu key="sub3" title="Submenu">\n            <Menu.Item key="7">Option 7</Menu.Item>\n            <Menu.Item key="8">Option 8</Menu.Item>\n          </SubMenu>\n        </SubMenu>\n        <SubMenu\n          key="sub4"\n          title={<span><Icon type="setting" /><span>Navigation Three</span></span>}\n        >\n          <Menu.Item key="9">Option 9</Menu.Item>\n          <Menu.Item key="10">Option 10</Menu.Item>\n          <Menu.Item key="11">Option 11</Menu.Item>\n          <Menu.Item key="12">Option 12</Menu.Item>\n        </SubMenu>\n      </Menu>\n    </Drawer>\n    <div\n      style={{\n        width: \'100%\', height: 667, background: \'#fff000\',\n        color: \'#fff\', textAlign: \'center\', lineHeight: \'667px\',\n      }}\n    >\n      \xe5\x86\x85\xe5\xae\xb9\xe5\x8c\xba\xe5\x9d\x97\n    </div>\n

\n\n

我相信使用 antd pro 会像它开箱即用一样进行排序。标准应用程序有更多组件\n您可以在此处预览更多适合您案例的组件，请查看滑块菜单。

\n\n

https://preview.pro.ant.design/#/

\n