React选项卡-选项卡选择其他页面的call选项卡

import React, { useState } from 'react';

const Tab = () => {
  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>
      <ul className="tab-nav">
        {tabs.map((tab, index) => (
          <li
            key={index}
            className={index === activeTab ? 'active' : ''}
            onClick={() => handleTabClick(index)}
          >
            {tab.title}
          </li>
        ))}
      </ul>
      <div className="tab-content">
        {tabs[activeTab].content}
      </div>
    </div>
  );
};

export default Tab;