React中switch case返回的组件无法显示的问题排查

你的Tab组件无法正常工作核心原因是没有通过状态管理当前选中的Tab项，也没有将对应的TabPane渲染到页面中，另外还有几个细节问题需要调整，下面是修复方案：

问题分析 #

1. 点击Tab时仅调用project函数返回组件，但没有将这个组件渲染到DOM里
2. 使用uuid()作为列表项key会导致组件频繁重渲染，应该用稳定的唯一标识
3. 依赖Bootstrap的data-toggle和href会和React的状态控制冲突，应该用React自己的状态管理显示逻辑
4. 每个TabPane都包含tab-content容器，不符合Bootstrap的Tab结构规范

修复后的完整代码 #

Tabs组件

import { useState } from 'react';

function Tabs () {
  // 用状态存储当前选中的Tab文本
  const [activeTab, setActiveTab] = useState("Special Price");

  const renderActiveTab = () => {
    switch(activeTab) {
      case "Special Price":   return <TabPane id="SpecialPrice" text={activeTab} />;
      case "New Product":   return <TabPane id="NewProduct" text={activeTab} />;
      case "Best Seller": return <TabPane id="BestSeller" text={activeTab} />;
      default:      return <h1>No section match</h1>
    }
  }

  return(
    <>
        <ul className="nav nav-pills tabs" role="tablist">
            {
                tabItems?.map((item) => (
                    <div key={item.text} className="tabItems">
                            <li className="nav-item"> 
                                {/* 通过点击事件更新状态，同时控制active类 */}
                                <a 
                                  href="#" 
                                  className={`nav-link ${activeTab === item.text ? 'active' : ''}`}
                                  onClick={(e) => {
                                    e.preventDefault(); // 阻止默认跳转
                                    setActiveTab(item.text);
                                  }}
                                > 
                                  {item.text} 
                                </a>
                            </li>
                    </div>
                ))
            }
        </ul>
        {/* 渲染当前选中的TabPane */}
        <div className="tab-content">
          {renderActiveTab()}
        </div>
    </>
);
}

TabPane组件

function TabPane ({id, text}){
  // 移除外层的tab-content，只保留tab-pane
  return(
      <div id={id} className="tab-pane active">
          {text}
      </div>
  );
}

关键调整说明 #

• 新增activeTab状态记录当前选中的Tab，点击时通过setActiveTab更新状态
• 将project函数改为renderActiveTab，用来根据当前状态返回对应的TabPane，并在JSX中渲染出来
• 列表项key改用item.text（如果有唯一id更好），避免不必要的重渲染
• 阻止a标签的默认跳转行为，用React状态控制active类和显示内容
• 调整TabPane结构，把tab-content提到Tabs组件中，符合Bootstrap的Tab布局规范

内容的提问来源于stack exchange，提问作者Jupixel