Reactjs 蚂蚁设计响应导航栏

我使用的是AntD，本以为这将是一个简单而快速的通用和标准响应导航栏设置，但结果证明它在默认情况下没有响应：

正如你所看到的，它被压扁了

代码如下：

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={["1"]}
                        style={{ lineHeight: '64px' }}
                        breakpoint="lg"
                        collapsedWidth="0"
                    >
                                <Menu.Item key="1">nav 1</Menu.Item>
                                <Menu.Item key="2">nav 2</Menu.Item>
                                <Menu.Item key="3">nav 3</Menu.Item>
                                <Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
                                <Menu.Item key="5"><Icon spin={true} type="login" className="loggin-btn" /></Menu.Item>
                    </Menu>

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={["1"]}
                        style={{ lineHeight: '64px' }}
                        breakpoint="lg"
                        collapsedWidth="0"
                    >

                        <Row key="1" gutter={16}>
                            <Col span={3} key="1">
                                <Menu.Item key="1">nav 1</Menu.Item>
                            </Col>
                            <Col span={3} key="2">
                                <Menu.Item key="2">nav 2</Menu.Item>
                            </Col>
                            <Col span={3} key="3">
                                <Menu.Item key="3">nav 3</Menu.Item>
                            </Col>
                            <Col span={3} offset={9} key="4">
                                <Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
                            </Col>
                            <Col span={3} key="5">
                                <Menu.Item key="5"><Icon type="login" className="loggin-btn" /></Menu.Item>
                            </Col>
                        </Row>
                    </Menu>

导航1
导航2
导航3

因此，我再次阅读了文档，并认为我必须使用菜单中的网格使其响应。但是，它给我带来了一些错误：

代码如下：

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={["1"]}
                        style={{ lineHeight: '64px' }}
                        breakpoint="lg"
                        collapsedWidth="0"
                    >
                                <Menu.Item key="1">nav 1</Menu.Item>
                                <Menu.Item key="2">nav 2</Menu.Item>
                                <Menu.Item key="3">nav 3</Menu.Item>
                                <Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
                                <Menu.Item key="5"><Icon spin={true} type="login" className="loggin-btn" /></Menu.Item>
                    </Menu>

<Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={["1"]}
                        style={{ lineHeight: '64px' }}
                        breakpoint="lg"
                        collapsedWidth="0"
                    >

                        <Row key="1" gutter={16}>
                            <Col span={3} key="1">
                                <Menu.Item key="1">nav 1</Menu.Item>
                            </Col>
                            <Col span={3} key="2">
                                <Menu.Item key="2">nav 2</Menu.Item>
                            </Col>
                            <Col span={3} key="3">
                                <Menu.Item key="3">nav 3</Menu.Item>
                            </Col>
                            <Col span={3} offset={9} key="4">
                                <Menu.Item key="4"><Icon spin={true} type="plus-circle" className="publish-btn" /></Menu.Item>
                            </Col>
                            <Col span={3} key="5">
                                <Menu.Item key="5"><Icon type="login" className="loggin-btn" /></Menu.Item>
                            </Col>
                        </Row>
                    </Menu>

导航1
导航2
导航3

更新

---

让我澄清一下。我不想要一个侧边栏（在我的例子中，它是一个小网站，没有很多页面）。我只想在重新调整菜单大小时有一个顶部导航栏。项目可以折叠并变成一个汉堡包图标。另外，我需要2个菜单项在右边

首先需要澄清的是：antd文档所说的“响应性”（在文档中）不是指导航栏项目回流，而是指侧栏折叠成一个较小的菜单，或者随着汉堡触发按钮的出现而消失

第二：混合菜单和行/列是个坏主意。发生错误的原因是，Menu.Item希望是Menu的直接子元素，而您通过Row/Col将其设置为孙子元素，这些子元素没有传递相同的道具

---

如您在澄清中所解释的，AntD中不支持您的要求。我的一个基于AntD的网站的工作方式与您正在寻找的类似。我在该网站上所做的是呈现两组菜单，一组用于桌面导航栏，另一组用于带汉堡包的小屏幕侧边栏，然后使用CSS媒体查询在

@screen sm

断点的两侧隐藏一个或另一个菜单。

不久前我也在寻找此类功能，并且 为了使Ant菜单具有响应性，我编写了一个简单的React组件

此组件接受Ant菜单标记作为道具，并根据视口宽度有条件地呈现菜单，可以是原样（对于桌面），也可以是将包装传递的菜单标记（对于移动设备）的Popover组件

我在这里提供了一个屏幕截图，说明当视口足够窄，可以只渲染汉堡包图标时，它会是什么样子

您可以通过工作示例找到Github回购协议

---

希望有帮助。

我在决定为项目选择Ant设计时考虑了这个问题。响应导航栏是常见的场景，但我想知道为什么在Ant设计中没有这样的东西？ 然后，我在回购协议中搜索问题，并将其作为对问题的评论

他们有一个单独的移动设备包。内部蚂蚁设计移动有单独的部分。在该部分中，您可以找到一个适用于移动设备的组件汉堡包图标

---

希望这对未来的读者有所帮助。

对于响应行为，请使用antd菜单组件中的“OverflowdIndicator”属性。您可以选择在菜单折叠时显示的任何antd图标。 使用antd的网格功能（Col-xl、lg、md、sm、xs）属性控制菜单何时崩溃

请查看下面的示例，了解简单的响应导航栏：

import React from 'react';
import { Row, Col, Typography, Layout, Menu } from 'antd';
import { MenuOutlined } from '@ant-design/icons';

const { Header, Content } = Layout;
const { Title } = Typography;

export interface NavBarProps {
    selectedPage: string;
    children: React.ReactNode;
}

export const NavBar: React.FC<NavBarProps> = (props: NavBarProps) => {

const gotoPage = (page: string) => {
  //GO TO MENU ITEM PAGE
};

return (
<Row justify='center'>
  <Col xl={24} lg={24} md={24} sm={24} xs={24}>
    <Header className='header-fixed'>
      <Row>
        <Col xl={12} lg={12} md={12} sm={20} xs={20}>
          <Title id='title-button' level={4}>
            <a onClick={() => gotoPage('')}>My App</a>
          </Title>
        </Col>
        <Col xl={12} lg={12} md={12} sm={4} xs={4}>
          <Menu
            theme='dark'
            mode='horizontal'
            defaultSelectedKeys={["item1"]}
            overflowedIndicator={<MenuOutlined />}
          >
            <Menu.Item
              key="item1"
              onClick={() => gotoPage("item1")}
            >
              item1
            </Menu.Item>
            <Menu.Item
              key={"item2"}
              onClick={() => gotoPage("item2")}
            >
              item2
            </Menu.Item>
            <Menu.Item
              key={"item3"}
              onClick={() => gotoPage("item3")}
            >
              item3
            </Menu.Item>
          </Menu>
        </Col>
      </Row>
    </Header>
    <Content>{props.children}</Content>
  </Col>
</Row>
);
};

然后按如下方式使用组件：

<NavBar selectedPage=''>
  <YourPageComponent />
</NavBar>

你好，贾斯珀，谢谢你的回复。让我澄清一下。我不想要一个侧边栏（在我的例子中，它是一个小网站，没有很多页面）。我只想在重新调整菜单大小时有一个顶部导航栏。项目可以折叠并变成一个汉堡包图标。另外，我需要2个菜单项，在右边。我们有没有道具来制作菜单。菜单项会折叠并变成汉堡包图标？@JesperWe感谢您的回复。你用React吗？您能分享一下您在回答中描述的实现吗？谢谢Tomas，谢谢您在这里所做的出色工作。只有一个问题，如果我们必须为这么简单的目的编写自己的代码，而等效的UI框架（例如Bootstrap）已经实现了它，那么我们为什么还要使用Ant设计呢？当我发现AntDesign中的导航栏不响应事件时，我就有了这种感觉。你是对的，Franva，虽然Ant Design中仍然缺少这一特定功能，但其他UI框架中仍然缺少太多的优秀功能。我想说的是，它总是关于妥协，对你的项目有效的东西不一定对其他项目有效。举个例子，让我们比较一下Ant Design和React Bootstrap中的表组件-Ant Design中的表组件与Bootstrap中的表组件相比有更多的功能和选项。我确信，我提出的解决方案只是暂时的，迟早会有反应灵敏的Meni成为Ant设计的一部分：）同意：）希望不会花太长时间。看起来很有希望。这是一个非常好的解决方法