从字符串动态渲染React组件：eval生产环境失效问题求助

你用eval动态获取组件的方式在生产环境代码压缩时必然失效——因为代码压缩工具会把导入的组件变量名（比如A、B、C）重命名为短变量（比如a、b、c），这时候eval("A")找不到对应的变量，就会返回无效值，导致React抛出"Element type is invalid"的错误。

正确的做法是用一个映射对象来关联字符串和组件，具体修改如下：

import React from 'react'
import './App.css'

import A from './ComponentA'
import B from './ComponentB'
import C from './ComponentC'

// 创建字符串到组件的映射对象
const componentMap = {
  A: A,
  B: B,
  C: C
}

const userInput = "ABC"
const userInputArray = userInput.split("")

const components = userInputArray.map((compKey, index) => {
  // 通过字符串键从映射对象中获取组件
  const Component = componentMap[compKey];
  // 容错处理：如果输入了不存在的字母，返回null避免报错
  if (!Component) return null;
  // 用JSX语法渲染组件，或者继续用React.createElement都可以
  return <Component key={index} />;
})

function App() {
  return (
    <>
      { components }
    </>
  )
}

export default App

为什么这个方法能解决问题？ #

• 映射对象的键是固定的字符串（"A"、"B"），对应的值是导入的组件本身，代码压缩时只会修改组件的变量名（比如把A改成_a），但对象的键值映射关系不会被破坏。
• 新增容错判断后，即使用户输入了不在映射里的字符，也不会导致页面崩溃。

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