react 实现tab切换

实现Tab切换的基本思路

在React中实现Tab切换功能，通常需要管理当前激活的Tab状态，并通过条件渲染或样式变化来显示对应的内容。以下是几种常见的实现方式。

使用useState管理状态

通过React的useState钩子来跟踪当前选中的Tab索引，动态渲染对应的内容。

import React, { useState } from 'react';

function TabComponent() {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
  const contents = ['Content 1', 'Content 2', 'Content 3'];

  return (
    <div>
      <div style={{ display: 'flex' }}>
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => setActiveTab(index)}
            style={{
              padding: '10px',
              backgroundColor: activeTab === index ? 'lightblue' : 'white',
            }}
          >
            {tab}
          </button>
        ))}
      </div>
      <div style={{ padding: '20px', border: '1px solid #ccc' }}>
        {contents[activeTab]}
      </div>
    </div>
  );
}

export default TabComponent;

使用动态组件渲染

如果需要每个Tab对应不同的组件，可以通过动态渲染组件的方式实现。

import React, { useState } from 'react';

function Tab1() { return <div>Tab 1 Content</div>; }
function Tab2() { return <div>Tab 2 Content</div>; }
function Tab3() { return <div>Tab 3 Content</div>; }

function TabComponent() {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
  const tabComponents = [<Tab1 />, <Tab2 />, <Tab3 />];

  return (
    <div>
      <div style={{ display: 'flex' }}>
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => setActiveTab(index)}
            style={{
              padding: '10px',
              backgroundColor: activeTab === index ? 'lightblue' : 'white',
            }}
          >
            {tab}
          </button>
        ))}
      </div>
      <div style={{ padding: '20px', border: '1px solid #ccc' }}>
        {tabComponents[activeTab]}
      </div>
    </div>
  );
}

export default TabComponent;

使用CSS类名切换样式

通过CSS类名动态控制Tab的样式，提升用户体验。

import React, { useState } from 'react';
import './Tabs.css';

function TabComponent() {
  const [activeTab, setActiveTab] = useState(0);
  const tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
  const contents = ['Content 1', 'Content 2', 'Content 3'];

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

export default TabComponent;

对应的CSS文件（Tabs.css）：

.tabs-container {
  width: 100%;
}

.tabs-header {
  display: flex;
  border-bottom: 1px solid #ccc;
}

.tab-button {
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
}

.tab-button.active {
  border-bottom: 2px solid blue;
  color: blue;
}

.tab-content {
  padding: 20px;
}

使用第三方库（如react-tabs）

对于更复杂的Tab需求，可以使用第三方库如react-tabs，它提供了更多功能和更好的可访问性。

安装库：

npm install react-tabs

使用示例：

import React from 'react';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

function TabComponent() {
  return (
    <Tabs>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
        <Tab>Tab 3</Tab>
      </TabList>

      <TabPanel>
        <div>Content 1</div>
      </TabPanel>
      <TabPanel>
        <div>Content 2</div>
      </TabPanel>
      <TabPanel>
        <div>Content 3</div>
      </TabPanel>
    </Tabs>
  );
}

export default TabComponent;

动态生成Tab内容

如果需要从API或动态数据生成Tab内容，可以通过数组映射实现。

import React, { useState, useEffect } from 'react';

function TabComponent() {
  const [activeTab, setActiveTab] = useState(0);
  const [tabs, setTabs] = useState([]);
  const [contents, setContents] = useState([]);

  useEffect(() => {
    // 模拟API调用
    setTimeout(() => {
      setTabs(['Dynamic Tab 1', 'Dynamic Tab 2', 'Dynamic Tab 3']);
      setContents(['Dynamic Content 1', 'Dynamic Content 2', 'Dynamic Content 3']);
    }, 1000);
  }, []);

  if (tabs.length === 0) return <div>Loading...</div>;

  return (
    <div>
      <div style={{ display: 'flex' }}>
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => setActiveTab(index)}
            style={{
              padding: '10px',
              backgroundColor: activeTab === index ? 'lightblue' : 'white',
            }}
          >
            {tab}
          </button>
        ))}
      </div>
      <div style={{ padding: '20px', border: '1px solid #ccc' }}>
        {contents[activeTab]}
      </div>
    </div>
  );
}

export default TabComponent;