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']创建为extends Component

Answer 1

You can put the components in an object and access them using the strings as keys.

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 />;
})}

如何按字符串名称呈现组件

1 个答案: