如何将实现Tab切换的jQuery代码转换为React.js？

核心思路 #

不用像 jQuery 那样手动操作 DOM 加类、控制显示隐藏，React 靠状态驱动渲染：用状态保存当前激活的 Tab 标识，点击标签时更新状态，React 自动完成类名切换和内容显示隐藏。

完整代码实现 #

import { useState } from 'react';

function TabGallery() {
  // 初始化激活的 Tab：tab1对应Laptop，tab2对应Phone，tab3对应Ipad
  const [activeTab, setActiveTab] = useState('tab1');

  // 切换Tab的触发函数
  const switchTab = (tabId) => {
    setActiveTab(tabId);
  };

  return (
    <div className="tab-container">
      {/* Tab 标签栏 */}
      <div className="tabs">
        <button 
          className={`tab ${activeTab === 'tab1' ? 'active' : ''}`}
          onClick={() => switchTab('tab1')}
        >
          Laptop
        </button>
        <button 
          className={`tab ${activeTab === 'tab2' ? 'active' : ''}`}
          onClick={() => switchTab('tab2')}
        >
          Phone
        </button>
        <button 
          className={`tab ${activeTab === 'tab3' ? 'active' : ''}`}
          onClick={() => switchTab('tab3')}
        >
          Ipad
        </button>
      </div>

      {/* 图片组内容区 */}
      <div className="img-groups">
        {/* Laptop 图片组：仅当activeTab为tab1时渲染 */}
        {activeTab === 'tab1' && (
          <div id="tab1c" className="img_group">
            <img src="/path/to/laptop-img1.jpg" alt="Laptop 示例图1" />
            <img src="/path/to/laptop-img2.jpg" alt="Laptop 示例图2" />
          </div>
        )}

        {/* Phone 图片组：仅当activeTab为tab2时渲染 */}
        {activeTab === 'tab2' && (
          <div id="tab2c" className="img_group">
            <img src="/path/to/phone-img1.jpg" alt="Phone 示例图1" />
            <img src="/path/to/phone-img2.jpg" alt="Phone 示例图2" />
          </div>
        )}

        {/* Ipad 图片组：仅当activeTab为tab3时渲染 */}
        {activeTab === 'tab3' && (
          <div id="tab3c" className="img_group">
            <img src="/path/to/ipad-img1.jpg" alt="Ipad 示例图1" />
            <img src="/path/to/ipad-img2.jpg" alt="Ipad 示例图2" />
          </div>
        )}
      </div>
    </div>
  );
}

export default TabGallery;

配套样式（还原原功能视觉效果） #

.tabs {
  margin-bottom: 16px;
}

.tab {
  padding: 8px 16px;
  border: none;
  background-color: #e0e0e0;
  cursor: pointer;
  margin-right: 8px;
  border-radius: 4px;
}

.tab.active {
  background-color: #2196f3;
  color: #fff;
}

.img_group {
  display: flex;
  gap: 12px;
}

.img_group img {
  width: 200px;
  height: auto;
  border-radius: 4px;
}

逻辑对应原 jQuery 功能点 #

• 给当前标签加active类：通过${activeTab === 'tabX' ? 'active' : ''}动态判断，React 自动切换类名，替代 jQuery 的addClass/removeClass
• 显示对应图片组：用条件渲染{activeTab === 'tabX' && <div>...</div>}，替代 jQuery 的hide()/show()，完全不需要手动操作 DOM

内容的提问来源于stack exchange，提问作者S H N