如何在React项目中按头部导入方式引入react-icons的BiChat组件？

我有两个独立文件：

1. page.js

import React from 'react';
import 'tailwindcss/tailwind.css';
import { MenuModalData } from './data';
export default function App() {
  return  (
  <>
  {Object.entries(MenuModalData).map(([key, value]) => {
      return (
        <>
        <div>
          {value?.icon && <value.icon size="1.6rem" className="my-auto" />}
        </div>
        </>
      )
  })}
  </>
  )
}

2. data.js

export const MenuModalData = [
  {
    type: "menu",
    name: "Products",
    page: "/shop",
  },
  {
    type: "menu",
    name: "Contact",
    icon: "BiChat",
    page: "/shop",
  }
]

我希望通过文件头部导入的方式引入react-icons的BiChat组件，适配当前的渲染代码{value?.icon && <value.icon size="1.6rem" className="my-auto" />}，请问该如何实现？

核心是让value.icon指向真实的React组件而非字符串，以下两种方式均可实现：

方式一：直接在数据文件中导入图标组件 #

修改data.js，导入对应图标组件并赋值给icon字段：

// 从react-icons的bi库中导入BiChat组件
import { BiChat } from 'react-icons/bi';

export const MenuModalData = [
  {
    type: "menu",
    name: "Products",
    page: "/shop",
  },
  {
    type: "menu",
    name: "Contact",
    icon: BiChat, // 直接传入组件，而非字符串
    page: "/shop",
  }
]

同时修正page.js中的遍历逻辑（原代码误用Object.entries遍历数组）：

import React from 'react';
import 'tailwindcss/tailwind.css';
import { MenuModalData } from './data';

export default function App() {
  return  (
  <>
    {MenuModalData.map((item) => {
      return (
        <div key={item.name}>
          {item?.icon && <item.icon size="1.6rem" className="my-auto" />}
          <span>{item.name}</span>
        </div>
      )
    })}
  </>
  )
}

方式二：在页面文件中建立图标映射表 #

如果不想在数据文件中引入组件，可以在page.js中导入图标并建立字符串与组件的映射：

import React from 'react';
import 'tailwindcss/tailwind.css';
import { MenuModalData } from './data';
// 导入需要的图标组件
import { BiChat } from 'react-icons/bi';

// 建立图标名称到组件的映射
const IconMap = {
  BiChat: BiChat,
};

export default function App() {
  return  (
  <>
    {MenuModalData.map((item) => {
      // 根据字符串获取对应的图标组件
      const IconComponent = IconMap[item.icon];
      return (
        <div key={item.name}>
          {IconComponent && <IconComponent size="1.6rem" className="my-auto" />}
          <span>{item.name}</span>
        </div>
      )
    })}
  </>
  )
}

data.js保持原有内容不变即可。

前置步骤 #

如果尚未安装react-icons，需要先执行安装命令：

npm install react-icons
# 或使用yarn
yarn add react-icons

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