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

Question

有人可以幫助我渲染具有變量名稱的反應組件嗎？例如，我有一個組件導入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

更新與組件類（而不是字符串）組件列表，並注意自定義組件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> 
    }); 
} 

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