javascript - 设置状态选项卡

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:更新以反射(reflect)当前的测试实现，仍然在控制台上看到以下消息

Uncaught (in promise) Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render metho

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}