使用 React 和 Redux 设置 Antd 的 Menu defaultSelectedKeys 值

Question

我正在使用 antd 构建 React 应用程序。我正在使用antd的Layout来设计布局。另外，我使用 React-router 进行路由，使用 redux 进行状态管理。

\n\n

在 antd 的菜单中，我将 defaultSelectedKeys 设置为空白数组，以便在页面加载时我不想显示活动菜单项。相反，当用户在浏览器中使用应用程序 URL 访问某个页面（组件）时，该页面的菜单项应该处于活动状态。

\n\n

例如，默认情况下，defaultSelectedKeys数组将为空。因此，最初没有菜单项会处于活动状态。当应用程序加载并且反应路由器路由到主组件时，主菜单项应该处于活动状态。

\n\n

为此，我使用 useEffect 挂钩在安装特定组件时通过菜单键调度操作。

\n\n

示例家庭组件：

\n\n

import React, { Fragment, useEffect } from "react";\nimport { useDispatch } from "react-redux";\nimport { CURRENT_COMPONENT } from "./../reducers/types";\nexport default function HomeComponent() {\n  const dispatch = useDispatch();\n  useEffect(() => {\n    dispatch({\n      type: CURRENT_COMPONENT,\n      payload: { component: "Landing", sideBarMenuKey: "1" }\n    });\n  }, [dispatch]);\n  return (\n    <Fragment>\n      <h1>This is a home componet </h1>\n      <br />\n      ...\n      <br />\n      <br />\n      ...\n      <br />\n      <br />\n      ...\n      <br />\n    </Fragment>\n  );\n}\n

\n\n

在 useEffect 中，我使用sideBarMenuKey: "1"向减速器分派一个操作，当该组件安装并能够使用react-redux useSelector 挂钩接收 Layout 组件中的状态更改时，它会完美分派。

\n\n

布局组件示例：

\n\n

import React, { Fragment } from "react";\nimport { useSelector } from "react-redux";\nimport { Layout, Menu, Breadcrumb } from "antd";\nimport { Switch, Route } from "react-router-dom";\nimport HomeComponent from "./Home";\nimport AboutComponent from "./About";\nconst { Header, Content, Footer } = Layout;\n\nexport default function LayoutComponent() {\n  const sideBarMenuKey = useSelector(\n    state => state.currentComponetReducer.sideBarMenuItemKey\n  );\n\n  console.log(sideBarMenuKey);\n  return (\n    <Fragment>\n      <Layout className="layout">\n        <Header>\n          <div className="logo" />\n          <Menu\n            theme="dark"\n            mode="horizontal"\n            defaultSelectedKeys={[sideBarMenuKey]}\n            style={{ lineHeight: "64px" }}\n          >\n            <Menu.Item key="1">Home</Menu.Item>\n            <Menu.Item key="2">About</Menu.Item>\n\n          </Menu>\n        </Header>\n        <Content style={{ padding: "0 50px" }}>\n          <Breadcrumb style={{ margin: "16px 0" }}>\n            <Breadcrumb.Item>Home</Breadcrumb.Item>\n            <Breadcrumb.Item>List</Breadcrumb.Item>\n            <Breadcrumb.Item>App</Breadcrumb.Item>\n          </Breadcrumb>\n          <div style={{ background: "#fff", padding: 24, minHeight: 280 }}>\n            <Switch>\n              <Route exact path="/" component={HomeComponent} />\n              <Route exact path="/about" component={AboutComponent} />\n            </Switch>\n          </div>\n        </Content>\n        <Footer style={{ textAlign: "center" }}>\n          Ant Design \xc2\xa92018 Created by Ant UED\n        </Footer>\n      </Layout>\n    </Fragment>\n  );\n}\n\n

\n\n

即使我在布局组件中收到状态更改，并且当我在 antd 的 Menu 属性中使用 sideBarMenuKey 作为defaultSelectedKeys={[sideBarMenuKey]}时，菜单项不会获得活动状态。

\n\n

示例： \n我创建了一个示例codesandbox 示例。链接如下\n https://codesandbox.io/s/styled-antd-react-starter-ytxko

\n\n

我创建了布局、主页和关于组件。最初，当您登录时，它将显示主页组件。如果要呈现 About 组件，请将 codeandbox 中的浏览器 URL 更改为https://url/about。在“主页”和“关于”组件中，我都使用 sideBarMenuKey 调度一个操作，并且状态也在更新。但菜单项并未激活。

\n

Answer 1

更改defaultSelectedKeys为selectedKeys应该可以使其工作：

<Menu
  theme="dark"
  mode="horizontal"
  selectedKeys={[sideBarMenuKey]}
  style={{ lineHeight: "64px" }}
>
  <Menu.Item key="1">Home</Menu.Item>
  <Menu.Item key="2">About</Menu.Item>
</Menu>

放入NavLink其中Menu.Item将允许您从导航选项卡切换到另一个导航选项卡。

<Menu
  theme="dark"
  mode="horizontal"
  selectedKeys={[sideBarMenuKey]}
  style={{ lineHeight: "64px" }}
>
  <Menu.Item key="1">
    <NavLink to="/">nav 1</NavLink>
  </Menu.Item>
  <Menu.Item key="2">
    <NavLink to="/about">nav 1</NavLink>
  </Menu.Item>
  <Menu.Item key="3">nav 3</Menu.Item>
</Menu>

你可以在这里看到它的实际效果