如何在react.js中切换单击按钮时的选项卡菜单

import React, { Component } from "react";

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

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

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

    return (
      <div>
        <ul>
          {data.map((item, index) => (
            <li
              key={index}
              onClick={() => this.handleTabClick(index)}
              className={activeTab === index ? "active" : ""}
            >
              {item.label}
            </li>
          ))}
        </ul>
        <div>
          {data.map((item, index) => (
            <div key={index} className={activeTab === index ? "content show" : "content"}>
              {item.content}
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default TabMenu;

const data = [
  {
    label: "Tab 1",
    content: "This is the content of Tab 1",
  },
  {
    label: "Tab 2",
    content: "This is the content of Tab 2",
  },
  {
    label: "Tab 3",
    content: "This is the content of Tab 3",
  },
];

// 在其他组件中使用TabMenu
function App() {
  return (
    <div>
      <h1>Tab Menu Example</h1>
      <TabMenu data={data} />
    </div>
  );
}

export default App;