React标签页组件优化方案咨询：现有实现如何改进？

你当前的实现已经完成了标签选中的基础功能，确实有不少可以优化的地方，以下是具体的改进方案：

核心优化点 #

• 合并状态管理：用单个状态变量activeTabId记录当前激活的标签ID，替代三个独立的布尔状态，逻辑更清晰，也方便后续扩展更多标签。
• 数据驱动渲染：把标签的标题、内容等数据抽成数组，通过循环渲染按钮和内容区域，避免重复的JSX代码，维护性更强。
• 内容显示控制：根据activeTabId控制对应内容的显示/隐藏，完成标签切换的完整功能。
• 简化事件处理：点击事件直接设置当前标签ID为激活状态，无需复杂的switch判断。

优化后的代码 #

import "./Buttons.css";
import { useState } from "react"; // 注意：原代码漏了导入useState，需要补上

const Buttons = (props) => {
  // 单个状态管理激活的标签ID，默认激活第一个标签
  const [activeTabId, setActiveTabId] = useState("1");

  // 标签数据，后续新增标签只需在这里添加即可
  const tabsData = [
    {
      id: "1",
      title: "What's New",
      content: (
        <>
          <h1>Example 1</h1>
          <p>more example examples 1</p>
        </>
      )
    },
    {
      id: "2",
      title: "Fresh Off The Block",
      content: (
        <>
          <h1>Example 2</h1>
          <p>more example examples 2</p>
        </>
      )
    },
    {
      id: "3",
      title: "Messages From Satan",
      content: (
        <>
          <h1>Example 3</h1>
          <p>more example examples 3</p>
        </>
      )
    }
  ];

  const handleClick = (tabId) => {
    // 直接设置当前点击的标签ID为激活状态
    setActiveTabId(tabId);
  };

  return (
    <div className="container">
      <div className="tabs">
        {/* 循环渲染标签按钮 */}
        {tabsData.map(tab => (
          <button
            key={tab.id}
            id={tab.id}
            onClick={() => handleClick(tab.id)}
            className={`tab-buttons ${activeTabId === tab.id ? "tab-buttons--active" : ""}`}
          >
            {tab.title}
          </button>
        ))}
      </div>

      {/* 循环渲染标签内容，根据activeTabId控制显示 */}
      {tabsData.map(tab => (
        <div
          key={tab.id}
          id={tab.id}
          className={`tab-content ${activeTabId === tab.id ? "tab-content--active" : ""}`}
        >
          {tab.content}
        </div>
      ))}
    </div>
  );
};

export default Buttons;

额外补充说明 #

1. CSS配合：需要在Buttons.css里给.tab-content添加默认隐藏样式，激活时显示：

.tab-content {
  display: none;
}
.tab-content--active {
  display: block;
}

2. 移除无用代码：原代码里的tabContainer.childNodes没有实际作用，直接移除即可，React中应通过状态控制UI，而非直接操作DOM。
3. 默认激活状态：设置默认激活第一个标签，既能提升用户体验，也避免初始状态下无标签激活的情况。

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