React：如何在Array.map中调用组件？

Question

我正在使用react-toolbox和标签。

我想做一个像这样的对象：

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

然后，在render的返回函数

中

<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>