React导航栏中react-icon的正确数据类型选型问题

问题根源 #

你代码里有两个核心问题导致图标无法正常显示：

• 错误的图标赋值方式：后面几个导航项把图标写成了字符串（比如<TbIcon.TbWorldPin/>），这只是普通文本，不是React组件
• 组件渲染方式错误：即使正确引用了图标组件，直接写{item.icon}也不会渲染，需要把它当作React组件来实例化使用

正确实现步骤 #

1. 修正类型定义 #

确保IconType从react-icons正确导入，你的类型定义本身没问题，补全导入即可：

// CustomTypes.ts
import { IconType } from "react-icons";

export interface LinkDataType {
  title: string;
  path: string;
  icon: IconType;
  cName: string;
}

2. 修正导航数据数组 #

• 移除字符串形式的图标，直接引用导入的图标组件
• 确保所有用到的图标库都提前导入

// DataArray.tsx
import React from "react";
import { LinkDataType } from "../Types/CustomTypes";
import * as AiIcons from "react-icons/ai";
import * as TbIcons from "react-icons/tb"; // 补充导入Tb图标库
import * as GiIcons from "react-icons/gi"; // 确保Gi图标库已导入

const DataArray: LinkDataType[] = [
  {
    title: "Home",
    path: "/",
    icon: AiIcons.AiFillHome,
    cName: "nav-text",
  },
  {
    title: "Login",
    path: "/login",
    icon: AiIcons.AiOutlineLogin,
    cName: "nav-text",
  },
  {
    title: "PlacesOverView",
    path: "/places",
    icon: TbIcons.TbWorldPin, // 直接引用组件，不要写成字符串
    cName: "nav-text",
  },
  {
    title: "PlacesWithDetails",
    path: "/places/:id",
    icon: TbIcons.TbWorldSearch,
    cName: "nav-text",
  },
  {
    title: "Register",
    path: "/register",
    icon: GiIcons.GiArchiveRegister,
    cName: "nav-text",
  },
];

export default DataArray;

3. 修正渲染逻辑 #

把图标当作React组件渲染，需要先将组件赋值给变量，再以标签形式实例化：

// 导航组件
import React from "react";
import { NavLink } from "react-router-dom";
import DataForNavBar from "./DataArray";

const Navbar = () => {
  return (
    <nav>
      <ul>
        {DataForNavBar.map((item, index) => {
          const Icon = item.icon; // 将图标组件赋值给变量，符合React规范
          return (
            <li key={index} className={item.cName}>
              <NavLink className="NavLink" to={item.path}>
                <Icon /> {/* 实例化图标组件 */}
                <span>{item.title}</span>
              </NavLink>
            </li>
          );
        })}
      </ul>
    </nav>
  );
};

export default Navbar;

关键说明 #

• IconType是react-icons官方提供的正确类型，用来统一表示所有图标组件的类型
• 渲染图标时必须以组件标签形式（<Icon />）使用，直接输出组件对象只会显示[object Object]
• 所有用到的图标库都要提前导入，避免出现未定义错误

内容的提问来源于stack exchange，提问作者Synav