当前位置：首页 > React

react实现tab 分页

2026-01-27 07:00:18React

React 实现 Tab 分页

在 React 中实现 Tab 分页功能可以通过状态管理和条件渲染完成。以下是常见的实现方法：

使用 useState 管理当前激活的 Tab

通过 useState 钩子跟踪当前选中的 Tab，动态切换内容显示。

import React, { useState } from 'react';

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

  return (
    <div>
      <div className="tab-header">
        <button 
          onClick={() => setActiveTab('tab1')} 
          className={activeTab === 'tab1' ? 'active' : ''}
        >
          Tab 1
        </button>
        <button 
          onClick={() => setActiveTab('tab2')} 
          className={activeTab === 'tab2' ? 'active' : ''}
        >
          Tab 2
        </button>
      </div>

      <div className="tab-content">
        {activeTab === 'tab1' && <div>Content for Tab 1</div>}
        {activeTab === 'tab2' && <div>Content for Tab 2</div>}
      </div>
    </div>
  );
};

动态渲染多个 Tab

若 Tab 数量较多，可以通过数组动态生成 Tab 头和内容，避免重复代码。

const tabs = [
  { id: 'tab1', label: 'Tab 1', content: 'Content for Tab 1' },
  { id: 'tab2', label: 'Tab 2', content: 'Content for Tab 2' },
];

const DynamicTabs = () => {
  const [activeTab, setActiveTab] = useState(tabs[0].id);

  return (
    <div>
      <div className="tab-header">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={activeTab === tab.id ? 'active' : ''}
          >
            {tab.label}
          </button>
        ))}
      </div>

      <div className="tab-content">
        {tabs.find((tab) => tab.id === activeTab)?.content}
      </div>
    </div>
  );
};

使用 CSS 增强样式

为 Tab 添加基础样式，提升用户体验。

.tab-header {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tab-header button {
  padding: 8px 16px;
  border: none;
  background: #eee;
  cursor: pointer;
}

.tab-header button.active {
  background: #007bff;
  color: white;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ddd;
}

结合路由实现 Tab

如果需要通过 URL 管理 Tab 状态，可以结合 React Router。

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

const RouterTabs = () => {
  return (
    <div>
      <div className="tab-header">
        <Link to="/tab1">Tab 1</Link>
        <Link to="/tab2">Tab 2</Link>
      </div>

      <Routes>
        <Route path="/tab1" element={<div>Content for Tab 1</div>} />
        <Route path="/tab2" element={<div>Content for Tab 2</div>} />
      </Routes>
    </div>
  );
};

使用第三方库

如果需要更复杂的功能（如动画、响应式设计），可以使用现成的库如 react-tabs。

react实现tab 分页

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

const ReactTabsExample = () => {
  return (
    <Tabs>
      <TabList>
        <Tab>Tab 1</Tab>
        <Tab>Tab 2</Tab>
      </TabList>

      <TabPanel>Content for Tab 1</TabPanel>
      <TabPanel>Content for Tab 2</TabPanel>
    </Tabs>
  );
};