React：Array.mapのコンポーネントを呼び出す方法は？

Question

私は反応ツールボックスとタブを使用しています。その後、

var Tabs = [ 
     { 
      value: 0, 
      label: 'First Tab', 
      componentName : "MyAwesomeComponent" 
     }, 
     { 
      value: 1, 
      label: 'Second Tab', 
      componentName : "MyOtherAwesomeComponent" 
     } 
    ] 

と、中の関数を返すレンダリング

<Tabs index={this.state.tabs.index} onChange={this.tabs.handleChange}> 
    {this.Tabs.map((item,index) => (
     <Tab label={item.label}> 
       **** Here, i want to call {item.componentName} component. *** 
     </Tab> 
    ))} 
</Tabs> 

これは名前によってコンポーネントを呼び出すことが可能です：

私のような物体がしたいと思いますか？

ありがとうございます。

Answer 1

次のようなものを使用することができます

import MyAwesomeComponent from 'path/to/MyAwesomeComponent' 
import MyOtherAwesomeComponent from 'path/to/MyOtherAwesomeComponent' 

const myComponents = { 
    'MyAwesomeComponent': MyAwesomeComponent, 
    'MyOtherAwesomeComponent': MyOtherAwesomeComponent, 
} 

<Tabs index={this.state.tabs.index} onChange={this.tabs.handleChange}> 
    {this.Tabs.map((item,index) => { 
     const Component = myComponents[item.componentName] 

     return (
     <Tab label={item.label}> 
      <Component value={item.value} label={item.label} /> 
     </Tab> 
    ) 
    })} 
</Tabs>