arrays - 如何通过字符串名称渲染组件

Question

我似乎无法使用名称字符串渲染组件。我希望能够动态生成组件名称字符串，该字符串具有可以呈现的现有相应组件。

array const 将通过 JSON 数据填充，这就是为什么我需要使用string 值来标识组件。

这是我正在尝试做的事情:

import Module1 from './module1';
import Module2 from './module2';
import Module3 from './module3';

const array = ['Module1', 'Module2', 'Module3'];

{array.map((Module, index) =>
 <Module />
)}

React 不是引用现有组件并渲染它，而是渲染一个全小写的自定义元素标签。

注意:这些组件['Module1', 'Module2', 'Module3']被创建为扩展组件

Answer 1

您可以将组件放入对象中并使用字符串作为键来访问它们。

import Module1 from './module1';
import Module2 from './module2';
import Module3 from './module3';

const array = ['Module1', 'Module2', 'Module3'];

const modules = {
  Module1,
  Module2,
  Module3,
};

{moduleOrderArr.map((key, index) => {
  const Module = modules[key];
  return <Module />;
})}