如何在react js中创建动态选项卡

import React, { Component } from 'react';

class Tabs extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabs: [
        { label: 'Tab 1', content: 'Content 1' },
        { label: 'Tab 2', content: 'Content 2' },
        { label: 'Tab 3', content: 'Content 3' }
      ],
      activeTab: 0
    };
  }

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

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

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

export default Tabs;