J'ai essayé de créer un menu, donc je crée un menuList pour configurer le menu avec getMenuNodes (), mais le framework Ant a été mis à niveau de la v3 à la v4 dont la méthode d'icône a été modifiée. ils utilisent maintenant icon={<PieChartOutlined />} au lieu de icon='PieChartOutlined', tout fonctionne bien, la zone d'icônes montre le mot <PieChartOutlined /> en ce moment. Je ne sais pas pourquoi c'est arrivé, aidez-moi s'il vous plaît à résoudre ce problème.

Left-navigation.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import logo from '../../assets/images/logo.png';
import './index.less';
import { Menu } from 'antd';
import { PieChartOutlined } from '@ant-design/icons';
import menuList from '../../config/menuConfig';
const { SubMenu } = Menu;
export default class LeftNav extends Component {
  getMenuNodes = menuList => {
    return menuList.map(item => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key} icon={item.icon}>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu key={item.key} icon={item.icon} title={item.title}>
            {this.getMenuNodes(item.children)}
          </SubMenu>
        );
      }
    });
  };
  render() {
    return (
      <div className="left-nav">
        <Link to="./" className="left-nav-header">
          <img src={logo} alt="" />
          <h1>Backend System</h1>
        </Link>
        <Menu
          mode="inline"
          theme="dark"
        >
          {this.getMenuNodes(menuList)}
        </Menu>
      </div>
    );
  }
}

MenuList.js

const menuList = [
  {
    title: 'Home', 
    key: '/home', 
    icon: '<PieChartOutlined />', 
  },
  {
    title: 'Item',
    key: '/products',
    icon: '<PieChartOutlined />',
    children: [
      {
        title: 'Category Control',
        key: '/category',
        icon: '<PieChartOutlined />',
      },
      {
        title: 'Product Control',
        key: '/product',
        icon: '<PieChartOutlined />',
      },
    ],
  },
  {
    title: 'User Control',
    key: '/user',
    icon: '<PieChartOutlined />',
  },
  {
    title: 'Role Control',
    key: '/role',
    icon: '<PieChartOutlined />',
  },
  {
    title: 'Diagram',
    key: '/charts',
    icon: '<PieChartOutlined />',
    children: [
      {
        title: 'Bar',
        key: '/charts/bar',
        icon: '<PieChartOutlined />',
      },
      {
        title: 'Line',
        key: '/charts/line',
        icon: '<PieChartOutlined />',
      },
      {
        title: 'Pie',
        key: '/charts/pie',
        icon: '<PieChartOutlined />',
      },
    ],
  },
];
export default menuList;
0
Keida 8 oct. 2020 à 06:22

2 réponses

Meilleure réponse

Vous passez une chaîne de '<PieChartOutlined />', vous devez passer directement le composant.

import { PieChartOutlined } from '@ant-design/icons';

Et:

      {
        title: 'Product Control',
        key: '/product',
        icon: <PieChartOutlined />,
      },

Vous devrez installer ant-design / icons si vous ne l'avez pas déjà fait:

npm install --save @ant-design/icons

1
Emilio 8 oct. 2020 à 03:29

Depuis la performance de la raison sur la version précédente, l'équipe antd appliquait l'arborescence pour utiliser l'icône. Plus de détails, vous pouvez consulter https://ant.design/docs/react/migration-v4 < / a>

0
Cường Mạnh Nguyễn 8 oct. 2020 à 03:27