React动态创建组件报错：无法从字符串创建React元素

这个问题我之前也碰到过！核心原因是React.createElement的第一个参数要求是React组件（类/函数），而不是字符串——你传字符串的时候，React会把它当成原生HTML标签（比如div、span）来处理，自然不认识node、diagramEngine这些自定义props，所以才会抛出警告和"Cannot create react element from string"的错误。

解决方案：维护组件映射表 #

你需要把组件名称字符串和对应的组件对象关联起来，通过一个映射表来获取真正的组件：

1. 先导入你的组件：

import Load from './path-to/Load';
import Migrate from './path-to/Migrate';

2. 创建一个组件名称到组件对象的映射：

const ComponentMap = {
  Load,
  Migrate
  // 后续新增组件都在这里添加
};

3. 动态获取组件并渲染：

// 从node中拿到组件名称字符串
const componentName = node.state.manipulator.name;
// 从映射表中获取对应的组件对象
const ElementToCreate = ComponentMap[componentName];

// 重要：先检查组件是否存在，避免渲染undefined导致报错
if (!ElementToCreate) {
  return null; // 或者返回一个默认提示组件，比如 <div>Unknown Component</div>
}

// 现在可以正常创建React元素了
return React.createElement(ElementToCreate, { node, diagramEngine });

为什么直接传组件名称可行？ #

你之前直接写React.createElement(Migrate, ...)能正常运行，是因为Migrate是你导入的组件对象本身，完全符合React.createElement对第一个参数的要求——它不是字符串，而是一个React组件类/函数。

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