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

时间:2016-12-27 16:58:42

标签: javascript reactjs components

有人可以帮我渲染具有变量名称的反应组件吗?例如,我有一个组件导入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>
    });
}

2 个答案:

答案 0 :(得分:1)

使用组件类(而不是字符串)更新组件列表,并注意自定义组件must be capitalised

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 :(得分:0)

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

const component_list = [component1, component2, component3]

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