React+TypeScript：NavBar组件子项选中状态管理的标准方案

方案一：父组件管理状态 + 克隆子组件（推荐，简洁可控） #

这种方式并没有你想的那么繁琐，反而逻辑清晰、易于维护。核心思路是父组件NavBar维护当前激活项的状态，遍历子组件时给每个NavBar.Item传递激活状态和点击回调。

代码示例：

// NavBar.jsx
import { Children, cloneElement, useState } from 'react';

export function NavBar({ children }) {
  const [activeKey, setActiveKey] = useState(null);

  const handleItemClick = (key) => {
    setActiveKey(key);
  };

  return (
    <nav className="nav-bar">
      {Children.map(children, (child) => {
        // 仅处理NavBar.Item类型的子组件
        if (child.type === NavBar.Item) {
          const itemKey = child.props.key || child.props.text;
          return cloneElement(child, {
            active: itemKey === activeKey,
            onClick: () => handleItemClick(itemKey),
          });
        }
        return child;
      })}
    </nav>
  );
}

NavBar.Item = function NavBarItem({ text, active, onClick }) {
  return (
    <button
      className={`nav-item ${active ? 'active' : ''}`}
      onClick={onClick}
    >
      {text}
    </button>
  );
};

// 使用方式
<NavBar>
  <NavBar.Item text="Main menu" key="main"/>
  <NavBar.Item text="Settings" key="settings"/>
  <NavBar.Item text="About" key="about"/>
</NavBar>

优势：

• 状态集中在父组件，便于统一管理和后续扩展（比如同步URL中的激活状态）
• 子组件NavBar.Item仅负责渲染和接收回调，职责单一
• 无需额外创建Context，避免不必要的上下文嵌套

方案二：Context方案（适配复杂场景） #

如果你的导航组件后续需要多层嵌套（比如带子菜单），或者需要在更深层级的组件中访问导航状态，Context才是更合适的选择。频繁创建Context并非问题，只要每个Context职责单一即可。

代码示例：

// NavBarContext.jsx
import { createContext, useContext, useState } from 'react';

const NavBarContext = createContext(null);

export function useNavBar() {
  const context = useContext(NavBarContext);
  if (!context) {
    throw new Error('useNavBar must be used within a NavBar provider');
  }
  return context;
}

export function NavBar({ children }) {
  const [activeKey, setActiveKey] = useState(null);

  const value = {
    activeKey,
    setActiveKey,
  };

  return (
    <NavBarContext.Provider value={value}>
      <nav className="nav-bar">{children}</nav>
    </NavBarContext.Provider>
  );
}

NavBar.Item = function NavBarItem({ text, key: itemKey }) {
  const { activeKey, setActiveKey } = useNavBar();
  const isActive = itemKey === activeKey;

  return (
    <button
      className={`nav-item ${isActive ? 'active' : ''}`}
      onClick={() => setActiveKey(itemKey)}
    >
      {text}
    </button>
  );
};

优势：

• 子组件可直接获取状态和修改方法，无需父组件层层传递props
• 适配组件结构复杂、需要跨层级共享状态的场景

总结 #

• 基础顶部导航优先选方案一，逻辑简单直观，维护成本低
• 复杂导航结构（嵌套子菜单、跨组件共享状态）再考虑方案二

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