本文介绍在 react + typescript 中，如何规范地实现容器组件（如 navbar）与其自定义子组件（如 navbar.item）之间的状态协同与事件通信，重点推荐 render props 模式，并对比 context 与 children 处理的适用边界。
在构建可复用、语义清晰的组合式组件（如
✅ 推荐方案：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(null);
const onSelect = (key: string) => {
setActiveKey(key);
};
return ;
};
// NavBar.Item.tsx（独立子组件，仅负责渲染逻辑）
interface ItemProps {
text: string;
key: string; // 必须显式传入 key，用于标识选项
isActive: boolean;
onClick: () => void;
}
export const NavBarItem = ({ text, isActive, onClick }: ItemProps) => (
);
// 使用方式（类型安全、语义清晰）
{({ activeKey, onSelect }) => (
<>
onSelect('home')}
/>
onSelect('settings')}
/>
onSelect('about')}
/>
)}
? 为什么这不是“hacky”？
- NavBar 不侵入子组件结构，不修改 Children 属性，仅提供上下文能力；
- 每个 NavBarItem 是纯展示组件，职责单一，可独立测试与复用；
- 类型系统全程保障 activeKey 和 onSelect 的正确传递与消费。
⚠️ 注意事项
- 若组件树更深（如嵌套多层自定义子组件），或需跨多个兄弟容器共享状态，再考虑 Context ——但应封装为专用 Hook（如 useNavBarContext），而非滥用 createContext；
- 避免在 NavBar 内部 cloneElement 或 React.Children.map 注入 props：这会削弱子组件自主性，且在 TypeScript 中难以精确推导类型；
- 如项目已集成 React Router，可直接使用
，其内置 end、className={({ isActive }) => ...} 等 API 已完美解决该场景，无需重复造轮子。
总结：对于“父控状态、子控渲染”的典型组合组件，render props 是最平衡、最符合 React 哲学的方案——简洁、可控、可类型化，且随组件演进而自然扩展。
