如何在React.js中渲染變量組件

Question

有人可以幫我用變量名渲染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>
    });
}

Answer 1

使用組件類（而不是字符串）更新組件列表，並注意自定義組件必須大寫 ：

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

Answer 2

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

const component_list = [component1, component2, component3]

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