Как в реакт подгружать меню не обновляя его свойств при перерендере?

Question

[Марат Иванов]

приложение SPA react, сверху грузится шапка, с боку боковое меню с ant.design - https://ant.design/components/menu/

Проблема в том что при каждом смене url меню обновляется сменяя активный класс. Подскажите пожалуйста как решить эту задачу. Спасибо.

import React from 'react';
import ReactDOM from 'react-dom';
import { Link } from "react-router-dom";
import { Menu, Icon, Button } from 'antd';
import Logo from "../logo";
import "antd/dist/antd.css";
import './index.scss'
import logo from '../logo';

const { SubMenu } = Menu;

export default class LeftMenu extends React.Component {
  state = {
    collapsed: true,
  };
  
  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    return (
      <div className="navigation">
        <div className="navigation-button" onClick={this.toggleCollapsed}>
          <Logo />
        </div>
        <Menu
          className="leftMenu"
          defaultSelectedKeys={['1']}
          // defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >
          <Menu.Item key="1">
            <Link to="/"><Icon type="home" />
              <span>Wellcome Page</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="2">
            <Link to="/a3">
              <Icon type="desktop" />
              <span>a3</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="3">
            <Link to="/a2">
              <Icon type="tag" />
              <span>a2</span>
            </Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Link to="/a1">
              <Icon type="bar-chart" />
              <span>a1</span>
            </Link>
          </Menu.Item>
          <SubMenu
            key="sub1"
            title={
              <span>
                <Icon type="block" />
                <span>Dashboards</span>
              </span>
            }
          >
            <Menu.Item key="5"><Link to="/dashboards/av">av</Link></Menu.Item>
            <Menu.Item key="6"><Link to="/dashboards/1">1</Link></Menu.Item>
            <Menu.Item key="7"><Link to="/dashboards/2">2</Link></Menu.Item>
            <Menu.Item key="8"><Link to="/dashboards/3">3</Link></Menu.Item>
            <Menu.Item key="9"><Link to="/dashboards/4">4</Link></Menu.Item>
            <Menu.Item key="10"><Link to="/dashboards/5">5</Link></Menu.Item>
            <Menu.Item key="11"><Link to="/dashboards/6">6</Link></Menu.Item>
            <Menu.Item key="12"><Link to="/dashboards/7">7</Link></Menu.Item>
          </SubMenu>
        </Menu>
      </div>
    );
  }
}


подгружается как <LeftMenu />

Answer 1

[hzzzzl]

может проще вместо Link использовать NavLink, тогда будет свойство activeClassName , зависящее от url

https://github.com/ReactTraining/react-router/blob...

Comments

[Марат Иванов]

Это можно, но тогда классы взятого готового меню надо будет обнулять, css antDisign перебирать, и настройки актив класса делать. Это вроде как не совсем легкий путь. Когда меню готовое - наверняка есть способ.

[hzzzzl]

Айрат Мухаметшин, а можно родительский компонент посмотреть?

Проблема в том что при каждом смене url меню обновляется сменяя активный класс

проблема в том, что LeftMenu ведь не должен перерендериваться вообще, а перерендериваться должен компонент "справа от меню", там где контент страницы

то есть что-то вроде

<main>
  <LeftMenu />

  <Switch>
    <Route path='/dashboards/1' component={Dash1} />
    <Route path='/dashboards/2' component={Dash2} />
    ...
  </Switch>
</main>

[Марат Иванов]

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

Answer 2

[Павел Диденко]

Не какой-то профи в Реакте, но с чего вы взяли, что происходит перерендер? Если идет смена активного класса, то Реакту на такое должно быть по боку, т.к. он сравнивает дом дерево по ключам, а не классам. Если у компонента не меняется ни стейт, ни пропсы, он тогда не будет делать ререндер

П.С. Сделайте массив с данными меню, а потом 1 раз через map отрисуйте все, зачем делать этот копипаст ужасный?

Comments

[Марат Иванов]

.а... ммм... я это, подгружаю на каждую страницу необходимые компоненты, меню в том числе. у меню свой стейт, оно в коробке идет с ним, а приложуха подгружая меню на новых страницах обнуляет активный класс. Был совет сделать это с привязкой к path исходя из Api меню, но я не пока понял как.

[Павел Диденко]

Айрат Мухаметшин,
Что-то типа такого, можно еще деструктуризацию сделать

const menuItems = [
  {id: 1, path: '/', type: 'home', title: 'Home'},
  {id: 2, path: '/a3', type: 'desktop', title: 'a3'},
  {id: 3, path: '/dashboards/av', type: null, title: 'av'},
];

const items = menuItems.map(item => (
  <Menu.Item key={item.id}>
    <Link to={item.path}>
    type ? <Icon type={item.type} /> : null;
    <span>{item.title}</span>
    </Link>
  </Menu.Item>
));

Просто собираешь массив из объектов каждого пункта меню, а отрисовываешь 1 раз.

И не ответил на вопрос, почему считаешь, что меню перерендеривается?

[Марат Иванов]

Павел Диденко, Потому что вижу что активный класс при переходе по страницамм меню уходит в default