设置状态选项卡

Question

我正在尝试在父组件状态下设置一个 React 组件的选项卡，类似这样

import React from 'react';
import Component1 from '../myChildComponents/Component1';
import Component2 from '../myChildComponents/Component2';
import Component3 from '../myChildComponents/Component3';

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs: [
        {id: '1', text: 'Tab 1', component: Component1},
        {id: '2', text: 'Tab 2', component: Component2},
        {id: '3', text: 'Tab 3', component: Component3},
      ]
    }
  }
  
  render() {
    return (
      <!-- All the other stuff goes here, like the tabs headers -->
      <TabContent>
      {
        this.state.tabs.map((t, i) => 
          <TabPane key={i} tabId={t.tabId}>
            <t.component {...this.props.data}>
          </TabPane>
        )
      }
      </TabContent>
    )
  }
}

这样的事情可以实现吗？我已经尝试过使用React.createComponent 函数，但这有效

Edit1：已更新以反映当前的测试实现，但仍会在控制台上看到以下消息

未捕获（承诺）不变违规：元素类型无效： 期望一个字符串（对于内置组件）或一个类/函数（对于 复合组件）但得到：未定义。您可能忘记导出 你的组件来自它定义的文件。检查渲染方法

Answer 1

是的，你可以使用这样的组件。

 render() {
    return (
      <!-- All the other stuff goes here, like the tabs headers -->
      <TabContent>
      {
        this.state.tabs.map((t, i) => 
          <TabPane key={i} tabId={t.tabId}>
            <t.component {...t.data}/>
          </TabPane>
        )
      }
      </TabContent>
    )
  }

唯一需要改变的是：

• 你的对象键是component；小写
• 您需要使用 t.data 对象上的扩展运算符来设置道具：{...t.data}