はどのように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> 
    }); 
}