Установить значение AntDusa defaultSelectedKeys с помощью React и Redux - PullRequest
Новая
       37

Установить значение AntDusa defaultSelectedKeys с помощью React и Redux

0 голосов
/ 20 сентября 2019

Я использую antd для создания приложения реакции.Я использую Antd's Layout для разработки макета.Кроме того, я использую реагирующий маршрутизатор для маршрутизации и избыточность для управления состоянием.

В меню antd я установил defaultSelectedKeys в пустой массив, чтобы при загрузке страницы я не хотел показывать активныйпункт меню.Вместо этого, когда пользователь обращается к определенной странице (компоненту) с помощью URL-адреса приложения в браузере, тогда элемент меню этой страницы должен быть активным.

Например, по умолчанию массив defaultSelectedKeys будет пустым,Поэтому ни один пункт меню не будет активным изначально.Когда приложение загружается и маршрутизатор реакции маршрутизирует к домашнему компоненту, тогда элемент домашнего меню должен быть активным.

Для этого я использую ловушку useEffect для отправки действия с помощью клавиши меню, когда конкретный компонентmount.

Пример Home Component: 

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

Здесь, в useEffect Я отправляю действие в редуктор с помощью sideBarMenuKey: "1" , и этоидеально диспетчеризуется, когда этот компонент монтируется и может получить изменение состояния в компоненте Layout, а также с помощью hook-компонента responseSubor useSelector.

Пример компонента Layout: 

import React, { Fragment } from "react";
import { useSelector } from "react-redux";
import { Layout, Menu, Breadcrumb } from "antd";
import { Switch, Route } from "react-router-dom";
import HomeComponent from "./Home";
import AboutComponent from "./About";
const { Header, Content, Footer } = Layout;

export default function LayoutComponent() {
  const sideBarMenuKey = useSelector(
    state => state.currentComponetReducer.sideBarMenuItemKey
  );

  console.log(sideBarMenuKey);
  return (
    <Fragment>
      <Layout className="layout">
        <Header>
          <div className="logo" />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={[sideBarMenuKey]}
            style={{ lineHeight: "64px" }}
          >
            <Menu.Item key="1">Home</Menu.Item>
            <Menu.Item key="2">About</Menu.Item>

          </Menu>
        </Header>
        <Content style={{ padding: "0 50px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <div style={{ background: "#fff", padding: 24, minHeight: 280 }}>
            <Switch>
              <Route exact path="/" component={HomeComponent} />
              <Route exact path="/about" component={AboutComponent} />
            </Switch>
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Fragment>
  );
}

Даже если яполучая изменение состояния в Компоненте Layout, и когда я использую sideBarMenuKey в опоре меню antd как defaultSelectedKeys = {[sideBarMenuKey]} пункт меню не получает активное состояние.

Пример примера: Я создал пример примера кода и коробки.Ссылка находится ниже https://codesandbox.io/s/styled-antd-react-starter-ytxko

Я создал компоненты Layout, Home и About.Изначально при входе в систему будет отображаться домашний компонент.Если вы хотите визуализировать компонент About, измените URL браузера в codesbox на https://url/about. И в компоненте Home, и в компоненте About я отправляю действие с sideBarMenuKey, и состояние также обновляется.Но пункт меню не становится активным.

1 Ответ

1 голос
/ 20 сентября 2019

Изменение 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>

Вы можете увидеть это в действии здесь

Edit styled-antd-react-starter

...