React 中实现父子组件通信的规范方式：以 NavBar 为例-html教程

本文介绍在 react + typescript 中，如何规范地实现容器组件（如 navbar）与其自定义子组件（如 navbar.item）之间的状态协同与事件通信，重点推荐 render props 模式，并对比 context 与 children 处理的适用边界。

在构建可复用、语义清晰的组合式组件（如 ）时，核心挑战在于：子组件需感知并响应全局选中状态，同时避免紧耦合或过度设计。直接使用 Context 虽可行，但对轻量级、单用途组件（如导航栏）而言，易造成不必要的抽象层级和性能开销；而手动遍历 Children 并注入事件则违背 React 的声明式原则，难以维护且破坏子组件封装性。

✅ 推荐方案：Render Props（函数子组件）模式
这是 React 官方倡导的、轻量且可控的通信范式——父组件通过 children 接收一个函数，将内部状态（如 activeKey）和回调（如 onSelect）作为参数传入，由该函数决定如何渲染子项。它天然支持类型安全、无额外 Context 开销，且完全符合 React 的数据流原则。

以下是一个 TypeScript 实现示例：

// NavBar.tsx
import { useState, ReactNode, createElement } from 'react';

interface NavBarProps {
  children: (props: {
    activeKey: string | null;
    onSelect: (key: string) => void;
  }) => ReactNode;
}

export const NavBar = ({ children }: NavBarProps) => {
  const [activeKey, setActiveKey] = useState<string | null>(null);

  const onSelect = (key: string) => {
    setActiveKey(key);
  };

  return <nav className="navbar">{children({ activeKey, onSelect })}</nav>;
};

// NavBar.Item.tsx（独立子组件，仅负责渲染逻辑）
interface ItemProps {
  text: string;
  key: string; // 必须显式传入 key，用于标识选项
  isActive: boolean;
  onClick: () => void;
}

export const NavBarItem = ({ text, isActive, onClick }: ItemProps) => (
  <button
    className={`nav-item ${isActive ? 'active' : ''}`}
    onClick={onClick}
    aria-current={isActive ? 'page' : undefined}
  >
    {text}
  </button>
);

// 使用方式（类型安全、语义清晰）
<NavBar>
  {({ activeKey, onSelect }) => (
    <>
      <NavBarItem
        text="Main menu"
        key="home"
        isActive={activeKey === 'home'}
        onClick={() => onSelect('home')}
      />
      <NavBarItem
        text="Settings"
        key="settings"
        isActive={activeKey === 'settings'}
        onClick={() => onSelect('settings')}
      />
      <NavBarItem
        text="About"
        key="about"
        isActive={activeKey === 'about'}
        onClick={() => onSelect('about')}
      />
    </>
  )}
</NavBar>

? 为什么这不是“hacky”？