tab切换react

在 React 中实现 tab 切换通常有多种方法，其中一种常见的方式是使用状态管理来跟踪当前活动的 tab，并根据活动的 tab 来渲染对应的内容。以下是一个简单的例子：

import React, { useState } from 'react';

function TabComponent() {
  const [activeTab, setActiveTab] = useState('tab1');

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

  return (
    <div>
      <button onClick={() => handleTabClick('tab1')}>Tab 1</button>
      <button onClick={() => handleTabClick('tab2')}>Tab 2</button>
      <button onClick={() => handleTabClick('tab3')}>Tab 3</button>

      {activeTab === 'tab1' && <div>Content for Tab 1</div>}
      {activeTab === 'tab2' && <div>Content for Tab 2</div>}
      {activeTab === 'tab3' && <div>Content for Tab 3</div>}
    </div>
  );
}

export default TabComponent;

在上面的例子中，我们使用 `useState` 钩子来创建一个名为 `activeTab` 的状态变量，并将其初始值设置为 'tab1'。每个 tab 按钮都有一个点击事件处理程序 `handleTabClick`，它会根据所点击的 tab 更新 `activeTab` 的值。

在渲染部分，我们使用条件渲染来根据 `activeTab` 的值显示对应的内容。只有当