如何使用功能组件在React中创建带有活动类的选项卡

import React, { useState } from 'react';

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

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

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

const tabsData = [
  {
    title: 'Tab 1',
    content: 'This is the content of Tab 1',
  },
  {
    title: 'Tab 2',
    content: 'This is the content of Tab 2',
  },
  {
    title: 'Tab 3',
    content: 'This is the content of Tab 3',
  },
];

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