如何在React中更改选项卡及其数据？

import React, { useState } from 'react';

const Tab = ({ tabs }) => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index) => {
    setActiveTab(index);
    // 在这里可以根据需要发起异步请求获取新的数据
  };

  return (
    <div>
      <ul>
        {tabs.map((tab, index) => (
          <li key={index} onClick={() => handleTabClick(index)}>
            {tab.title}
          </li>
        ))}
      </ul>
      <div>
        {tabs[activeTab].content}
      </div>
    </div>
  );
};

// 使用示例
const tabs = [
  { title: '选项卡1', content: '选项卡1的内容' },
  { title: '选项卡2', content: '选项卡2的内容' },
  { title: '选项卡3', content: '选项卡3的内容' },
];

const App = () => {
  return (
    <div>
      <h1>选项卡示例</h1>
      <Tab tabs={tabs} />
    </div>
  );
};

export default App;