当前位置：首页 > React

react实现tab蓝切换

2026-01-27 12:28:23React

React 实现 Tab 栏切换

在 React 中实现 Tab 栏切换通常涉及状态管理和动态内容渲染。以下是两种常见实现方式：

使用 useState 管理状态

import React, { useState } from 'react';

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

  const tabs = [
    { title: 'Tab 1', content: 'Content for Tab 1' },
    { title: 'Tab 2', content: 'Content for Tab 2' },
    { title: 'Tab 3', content: 'Content for Tab 3' }
  ];

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

使用 CSS 样式控制

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

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

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

使用第三方库

对于更复杂的 Tab 功能，可以考虑使用现成的 UI 库：

import { Tabs, Tab } from 'react-bootstrap';

function ControlledTabs() {
  const [key, setKey] = useState('home');

  return (
    <Tabs activeKey={key} onSelect={(k) => setKey(k)}>
      <Tab eventKey="home" title="Home">
        Home content
      </Tab>
      <Tab eventKey="profile" title="Profile">
        Profile content
      </Tab>
    </Tabs>
  );
}

动画过渡效果

为 Tab 切换添加动画效果：

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

// 在渲染内容时使用
<CSSTransition
  in={true}
  appear={true}
  timeout={300}
  classNames="fade"
>
  <div>{tabs[activeTab].content}</div>
</CSSTransition>

对应的 CSS:

react实现tab蓝切换

.fade-enter {
  opacity: 0;
}

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

.fade-exit {
  opacity: 1;
}

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

这些方法提供了从简单到高级的 Tab 实现方案，可根据项目需求选择合适的实现方式。