react实现标签切换

使用 useState 管理当前选中标签

在 React 中实现标签切换功能，可以通过 useState 钩子来跟踪当前选中的标签。定义一个状态变量存储当前激活标签的索引或标识符，点击不同标签时更新该状态。

import { useState } from 'react';

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

  return (
    <div>
      <div className="tab-buttons">
        {tabs.map((tab, index) => (
          <button
            key={index}
            onClick={() => setActiveTab(index)}
            className={activeTab === index ? 'active' : ''}
          >
            {tab}
          </button>
        ))}
      </div>
      <div className="tab-content">
        {activeTab === 0 && <div>Content for Tab 1</div>}
        {activeTab === 1 && <div>Content for Tab 2</div>}
        {activeTab === 2 && <div>Content for Tab 3</div>}
      </div>
    </div>
  );
}

动态渲染标签内容

通过数组或对象结构管理标签内容，可以避免硬编码条件渲染。将标签内容和标题统一存储，根据 activeTab 动态渲染对应的内容。

const tabData = [
  { title: 'Home', content: 'Welcome to the home page' },
  { title: 'About', content: 'Learn more about us' },
  { title: 'Contact', content: 'Get in touch' }
];

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

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

使用 CSS 增强交互效果

通过 CSS 为标签按钮和内容添加过渡效果，提升用户体验。为激活状态的标签添加高亮样式，内容区域可以添加淡入淡出动画。

.tab-buttons button {
  padding: 8px 16px;
  margin-right: 4px;
  border: none;
  background: #eee;
  cursor: pointer;
}

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

.tab-content {
  padding: 16px;
  border: 1px solid #ddd;
  margin-top: 8px;
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

封装可复用的 Tab 组件

将标签切换逻辑封装成独立组件，提高代码复用性。通过 children 或 props 传递标签内容和配置，使组件更灵活。

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

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

// 使用方式
<Tabs tabs={[
  { label: 'Home', content: <HomePage /> },
  { label: 'Profile', content: <ProfilePage /> }
]} />

支持 URL 同步的标签切换

使用 react-router 或 URL 参数同步当前选中的标签，实现浏览器前进/后退导航功能。适合需要持久化标签状态的场景。

import { useSearchParams } from 'react-router-dom';

function TabSwitcher() {
  const [searchParams, setSearchParams] = useSearchParams();
  const activeTab = searchParams.get('tab') || 'home';

  const handleTabChange = (tab) => {
    setSearchParams({ tab });
  };

  return (
    <div>
      <button onClick={() => handleTabChange('home')}>Home</button>
      <button onClick={() => handleTabChange('about')}>About</button>
      {activeTab === 'home' && <HomeContent />}
      {activeTab === 'about' && <AboutContent />}
    </div>
  );
}