React中如何调用含变量名的模块？动态加载SVG图标组件故障排查

嘿，我来帮你搞定这两个React相关的问题！先从你遇到的具体SVG图标加载报错说起，再聊聊通用的动态调用含变量名称模块的方法。

一、修复你的动态SVG图标组件代码 #

你当前的代码里，<MyIcon.icons[{name}] />这种写法是错误的，React没法正确识别这个动态组件。要实现动态渲染组件，得遵循两个关键规则：

• 动态取出的组件必须赋值给一个大写开头的变量（React会把小写开头的变量当成普通HTML标签处理）
• 不能直接在JSX里用对象索引的方式写组件标签

下面是修正后的完整代码：

import React from 'react';
import PropTypes from 'prop-types';
import { IconHome, IconCow, IconDog } from '../Icon';

const MyIcon = ({ name }) => {
  // 1. 从icons对象中取出对应的组件，变量名大写开头
  const IconComponent = MyIcon.icons[name];
  
  // 2. 可选：处理name不存在的情况，避免报错
  if (!IconComponent) {
    return <div>图标 {name} 不存在</div>;
  }

  return (
    <div>
      {/* 3. 渲染大写开头的组件变量 */}
      <IconComponent />
      {name}
    </div>
  );
};

MyIcon.icons = {
  home: IconHome,
  dog: IconDog, // 这里你之前写反了，dog对应IconDog，cow对应IconCow哦
  cow: IconCow,
};

MyIcon.propTypes = {
  name: PropTypes.string.isRequired,
};

export default MyIcon;

另外注意：你原来的MyIcon.icons里把dog映射到了IconCow，cow映射到了IconDog，这应该是笔误，我已经帮你修正过来了，避免图标显示错位~

二、React中调用名称包含变量的模块 #

根据场景不同，有两种常见实现方式：

1. 预加载模块后动态取值 #

如果模块已经提前导入（像你例子里的Icon组件），可以把它们挂载到一个对象上，然后通过变量作为索引取出：

// 先导入所有可能用到的模块
import { ModuleA, ModuleB, ModuleC } from './modules';

// 把模块存入对象
const moduleMap = {
  a: ModuleA,
  b: ModuleB,
  c: ModuleC,
};

// 用变量动态获取模块
const currentModule = moduleMap[variableName];
// 如果是组件，记得大写变量名后渲染
const CurrentComponent = currentModule;
<CurrentComponent />;

2. 动态导入模块（代码分割） #

如果模块体积较大，或者需要按需加载，可以用React的lazy和Suspense实现动态导入：

import React, { lazy, Suspense } from 'react';

// 用变量拼接模块路径，动态导入（注意路径不能完全是变量，打包工具需要静态分析前缀）
const DynamicModule = lazy(() => import(`./modules/${moduleName}`));

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <DynamicModule />
    </Suspense>
  );
}

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