如何使用变量使用延迟加载导入react-icons模块

Question

我有一个名为

IconRenderer

的 React 组件，并且传递了 2 个名为

iconName

和

iconPath

的道具。 IconRenderer 的作用是使用延迟加载导入

react-icon

模块，通过获取

iconPath

和

iconName

以下是我的IconRenderer组件

type Props = {
  iconName: string;
  iconPath: string;
};
const IconRenderer = (props: Props) => {
  const { iconName, iconPath } = props;
  const path = `react-icons/${iconPath}`

  const Icon = lazy(async () => {
    const module = await import(path);
    return { default: module[iconName] };
  });
  console.log(Icon);


  return (
    <Suspense fallback={<div>Loading...</div>}>
      <IconContext.Provider value={{ size: "3em" }}>
        <Icon />
      </IconContext.Provider>
    </Suspense>
  );
};

export default IconRenderer;

我在 APP.tsx 中使用这个 IconRenderer 组件，如下

<IconRenderer iconName="FaAccessibleIcon" iconPath="fa" />

导入模块时，提示以下错误

Cannot find module 'react-icons/fa'

无论如何，当通过直接传递路径而不将其分配给变量来导入模块时，如下所示，它可以工作

 const Icon = lazy(async () => {
    const module = await import(`react-icons/fa`);
    console.log(module)
   
    return { default: module[iconName] };
  });
  

我想要的是通过获取变量来导入模块

path

Answer 1

const Icon = lazy(async () => {
  const module = await import(`react-icons/${iconPath}`);
  return { default: module[iconName] };
});

这确保动态导入在运行时使用正确的路径。将路径存储在变量 (

const path = react-icons/${iconPath}

) 中可能会导致问题，特别是在某些情况下动态导入无法正确解析路径时。