如何构建Tabs组件Reactjs

import React, { useState } from 'react';

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0);
  
  // 其他代码
}

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

const tabsData = [
  { title: 'Tab 1', content: 'Content 1' },
  { title: 'Tab 2', content: 'Content 2' },
  { title: 'Tab 3', content: 'Content 3' },
];

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

export default Tabs;