Javascript 如何在React.js中呈现变量组件

有人能帮我用变量名渲染react组件吗？例如，我有一个导入3个其他组件的组件，我想在组件数组中循环并渲染它们。非常粗糙的伪代码：

import component1 from '...';
import component2 from '...';
import component3 from '...';

const component_list = ['component1', 'component2', 'component3']

renderComponents() {
    return this.component_list.map((component) {
      <div>
        <{component} />
      </div>
    });
}

从“…”导入组件1；
从“…”导入组件2；
从“…”导入组件3；
const component_list=['component1'、'component2'、'component3']
renderComponents（）{
返回此.component\u list.map（（组件）{
});
}

从“…”导入组件1；
从“…”导入组件2；
从“…”导入组件3；
常量组件列表=[component1、component2、component3]
renderComponents（）{
返回组件列表.map（（组件）=>{
});
}

使用组件类（而不是字符串）更新组件列表，并注意自定义组件：

从“…”导入组件1；
从“…”导入组件2；
从“…”导入组件3；
常量组件列表=[component1，component2，component3]；
renderComponents（）{
返回此.component\u list.map（（component）=>{
});
}

。Gj

import component1 from '...';
import component2 from '...';
import component3 from '...';

const component_list = [component1, component2, component3]

renderComponents() {
    return component_list.map((component) => {
      <div>
        <component />
      </div>
    });
}

import component1 from '...';
import component2 from '...';
import component3 from '...';

const component_list = [component1, component2, component3];

renderComponents() {
    return this.component_list.map((Component) => {
      <div>
        <Component />
      </div>
    });
}