如何通过字符串名称而非组件名调用React函数组件

JSX 本身不支持直接传入字符串作为自定义组件标签名使用——编译阶段小写开头的标签会被识别为原生DOM元素，只有大写开头的变量/标识符才会被解析为自定义组件，且模块化打包环境下，你无法直接通过字符串变量名拿到作用域内的组件引用，必须手动做映射绑定，具体实现如下：

标准实现：组件映射表（官方推荐方案，无兼容问题） #

• 提前维护一个组件映射对象，键为你要匹配的组件名字符串，值为对应的组件引用：

// 提前导入所有需要动态调用的组件
import Function1 from './path/to/Function1';
import Function2 from './path/to/Function2';
import ProfileCard from './path/to/ProfileCard';

// 建立字符串与组件的映射关系
const componentMap = {
  function1: Function1,
  function2: Function2,
  profileCard: ProfileCard
};

• 渲染时根据拿到的组件名字符串，从映射表中取出对应组件，赋值给大写开头的变量后即可按常规组件方式渲染，props正常透传即可：

function DynamicComponent({ componentName, ...restProps }) {
  // componentName 就是你持有的组件名字符串，比如 "function1"
  const CurrentComponent = componentMap[componentName];

  // 兜底处理：传入不存在的组件名时避免直接报错
  if (!CurrentComponent) return null;

  // 注意：存储组件的变量必须*大写开头*，JSX才会识别为自定义组件
  return <CurrentComponent {...restProps} />;
}

常见误区 #

• 不要尝试直接写<name {...props} />这种语法：JSX编译后会把小写标签名转成字符串传给React.createElement，React会把它当成原生HTML标签解析，根本不会识别为你定义的函数组件。
• 不要尝试通过window[componentName]读取组件：现代React项目均采用模块化打包，组件默认不会挂载到全局window对象，生产环境代码压缩混淆后变量名会变化，这种写法必然出现线上问题。
• 映射表支持灵活扩展：如果需要做按需加载，可以直接在映射表中配置懒加载组件，比如function1: React.lazy(() => import('./Function1'))，外层配合Suspense包裹即可正常使用。

内容的提问来源于stack exchange，提问作者Minh Pham - Drake