React在选定选项卡上添加活动的类

import React, { useState } from 'react';

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

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

  return (
    <div>
      <div className="tab-container">
        <div
          className={`tab ${activeTab === 0 ? 'active' : ''}`}
          onClick={() => handleTabClick(0)}
        >
          Tab 1
        </div>
        <div
          className={`tab ${activeTab === 1 ? 'active' : ''}`}
          onClick={() => handleTabClick(1)}
        >
          Tab 2
        </div>
        <div
          className={`tab ${activeTab === 2 ? 'active' : ''}`}
          onClick={() => handleTabClick(2)}
        >
          Tab 3
        </div>
      </div>
      <div className="tab-content">
        {/* 根据当前活动选项卡的属性值显示相应的内容 */}
        {activeTab === 0 && <p>Tab 1 content</p>}
        {activeTab === 1 && <p>Tab 2 content</p>}
        {activeTab === 2 && <p>Tab 3 content</p>}
      </div>
    </div>
  );
};

export default TabComponent;