React组件在选项卡中呈现来自JSON对象的动态内容

// 父组件
class TabContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeTab: 0 // 默认选中第一个选项卡
    };
  }

  handleTabClick = (index) => {
    this.setState({
      activeTab: index
    });
  }

  render() {
    const { activeTab } = this.state;
    const tabs = this.props.tabs;

    return (
      <div>
        <div className="tab-nav">
          {tabs.map((tab, index) => (
            <div
              key={index}
              className={index === activeTab ? "active" : ""}
              onClick={() => this.handleTabClick(index)}
            >
              {tab.title}
            </div>
          ))}
        </div>
        <div className="tab-content">
          {tabs[activeTab].content}
        </div>
      </div>
    );
  }
}

// 子组件
class TabContent extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <div>
        <h2>{data.title}</h2>
        <p>{data.description}</p>
      </div>
    );
  }
}

// 使用示例
const tabsData = [
  {
    title: "Tab 1",
    content: <TabContent data={jsonData.tab1} />
  },
  {
    title: "Tab 2",
    content: <TabContent data={jsonData.tab2} />
  },
  // 可以添加更多的选项卡
];

ReactDOM.render(
  <TabContainer tabs={tabsData} />,
  document.getElementById("root")
);