react实现tab切换功能

使用 React 状态管理实现 Tab 切换

通过 useState 管理当前激活的 Tab 索引，动态渲染内容。

import React, { useState } from 'react';

const 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',
              background: activeTab === index ? 'lightblue' : 'white'
            }}
          >
            {tab}
          </button>
        ))}
      </div>
      <div>{contents[activeTab]}</div>
    </div>
  );
};

使用 CSS 类名控制 Tab 样式

通过条件类名实现选中状态的样式切换。

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

  return (
    <div className="tab-container">
      <div className="tab-header">
        {['Home', 'Profile', 'Settings'].map((label, index) => (
          <div
            key={index}
            className={`tab-item ${activeTab === index ? 'active' : ''}`}
            onClick={() => setActiveTab(index)}
          >
            {label}
          </div>
        ))}
      </div>
      <div className="tab-content">
        {activeTab === 0 && <div>Home Content</div>}
        {activeTab === 1 && <div>Profile Content</div>}
        {activeTab === 2 && <div>Settings Content</div>}
      </div>
    </div>
  );
};

配套 CSS 示例：

.tab-header {
  display: flex;
  border-bottom: 1px solid #ddd;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
}

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

.tab-content {
  padding: 20px;
}

使用 React Router 实现路由级 Tab

适用于需要 URL 同步的复杂场景。

import { Link, Route, Routes } from 'react-router-dom';

const RouterTabs = () => {
  return (
    <div>
      <nav>
        <Link to="/home">Home</Link>
        <Link to="/profile">Profile</Link>
      </nav>

      <Routes>
        <Route path="/home" element={<HomePage />} />
        <Route path="/profile" element={<ProfilePage />} />
      </Routes>
    </div>
  );
};

封装可复用的 Tab 组件

创建通用组件提高代码复用性。

const Tabs = ({ tabs }) => {
  const [activeTab, setActiveTab] = useState(0);

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

// 使用示例
const App = () => {
  const tabData = [
    { label: 'Tab 1', content: <div>First tab content</div> },
    { label: 'Tab 2', content: <div>Second tab content</div> }
  ];

  return <Tabs tabs={tabData} />;
};

添加动画效果

使用 React Transition Group 实现平滑的切换动画。

import { CSSTransition } from 'react-transition-group';

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

  return (
    <div>
      {/* Tab 按钮部分 */}
      <CSSTransition
        in={true}
        appear={true}
        timeout={300}
        classNames="fade"
      >
        <div key={activeTab}>
          {activeTab === 0 ? 'First Content' : 'Second Content'}
        </div>
      </CSSTransition>
    </div>
  );
};

配套 CSS：

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms;
}

.fade-exit {
  opacity: 1;
}

.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms;
}