在单击按钮时在react选项卡之间导航

import React, { useState } from 'react';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);

  // 其他代码...
}

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);

  const tabs = [
    { title: '选项卡1', content: '这是选项卡1的内容' },
    { title: '选项卡2', content: '这是选项卡2的内容' },
    { title: '选项卡3', content: '这是选项卡3的内容' },
  ];

  const handleTabClick = (index) => {
    setActiveTab(index);
  };

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

const App = () => {
  return (
    <div>
      <Tabs />
    </div>
  );
}