如何通过遍历数组动态导入react-icons中的图标？

当然有办法实现这种动态导入图标的需求！你的思路完全没问题，但现有代码里有几个语法和逻辑坑得先填上，我来一步步帮你搞定：

先说说你现有代码的问题 #

1. 动态import是异步操作：你直接在getIcon里同步调用import是行不通的，因为动态导入返回的是Promise，必须处理异步加载的状态。
2. JSX语法错误：<{title} />这种写法不符合JSX规范，你需要先把导入的组件赋值给一个变量，再用变量作为组件标签。
3. 动态解构的问题：import { title } from ...里的title是变量，ES模块的解构不支持动态变量名，得先导入整个模块，再通过属性访问获取对应的组件。

解决方案一：用React.lazy + Suspense（推荐，支持按需加载） #

这种方式符合React的组件化规范，还能实现图标按需加载（只有当图标出现在视口中时才会加载对应的模块）：

import React, { Suspense, lazy } from 'react';
import icons from '../../data/icons';

const MyComponent = () => {
  // 封装一个动态加载图标的子组件
  const DynamicIcon = ({ title, path }) => {
    // 动态导入图标模块，并把目标组件作为default导出给React.lazy
    const IconComponent = lazy(() => 
      import(`react-icons/${path}`).then(module => ({
        default: module[title]
      }))
    );

    // Suspense用来处理加载中的占位内容
    return (
      <Suspense fallback={<span>加载中...</span>}>
        <IconComponent />
      </Suspense>
    );
  };

  return (
    <div>
      {icons.map((icon, index) => (
        <h1 key={index}>
          <DynamicIcon {...icon} />
        </h1>
      ))}
    </div>
  );
};

export default MyComponent;

关键说明： #

• React.lazy需要接收一个返回Promise的函数，我们通过import(react-icons/${path})动态导入对应模块，再用.then把模块中对应title的组件作为default导出，这样lazy就能正确识别。
• Suspense组件必须包裹在懒加载组件的上层，用来显示加载中的占位内容（比如加载动画、文字提示）。
• 给列表中的每个图标加上key，符合React列表渲染的要求，避免警告。

解决方案二：用useEffect + Promise.all（一次性加载所有图标） #

如果你希望在组件挂载时就一次性加载所有图标，不需要按需加载，可以用这种方式：

import React, { useState, useEffect } from 'react';
import icons from '../../data/icons';

const MyComponent = () => {
  // 用状态存储加载后的图标组件
  const [loadedIcons, setLoadedIcons] = useState([]);

  useEffect(() => {
    // 异步批量加载所有图标
    const loadAllIcons = async () => {
      const iconComponents = await Promise.all(
        icons.map(async ({ title, path }) => {
          // 导入整个模块，再获取对应title的组件
          const iconModule = await import(`react-icons/${path}`);
          return {
            Component: iconModule[title],
            title
          };
        })
      );
      setLoadedIcons(iconComponents);
    };

    loadAllIcons();
  }, []);

  return (
    <div>
      {loadedIcons.map(({ Component }, index) => (
        <h1 key={index}>
          <Component />
        </h1>
      ))}
    </div>
  );
};

export default MyComponent;

关键说明： #

• 用useEffect在组件首次挂载时触发加载逻辑，Promise.all可以并行处理多个异步导入请求，提升加载效率。
• 把加载完成的组件存在状态中，状态更新后组件会自动渲染所有图标。
• 这种方式适合图标数量不多的场景，一次性加载后后续渲染不需要再请求模块。

总结 #

两种方案都能实现你想要的动态导入需求：

• 如果追求性能优化（按需加载），优先选React.lazy + Suspense的方案。
• 如果希望一次性加载所有图标，避免多次网络请求，选useEffect + Promise.all的方案。

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