# 组件组合模式 * 设计可重用的组件API * 需要避免支柱钻孔 * 创建复合组件（选项卡、手风琴等） * 构建灵活的、可组合的界面 * 在构图模式之间进行选择 1. **Children Prop** \- 最简单的组合，将组件作为子组件传递 2. **复合组件** \- 协同工作的组件（基于上下文） 3. **渲染道具** \- 作为子函数以实现灵活性 4. **组合优于道具** \- 优先使用插槽而非配置道具 **何时使用：** * 儿童道具：简单收容 * 复合组件：协调行为（选项卡、手风琴） * 渲染道具：自定义渲染逻辑 * 插槽：多个插入点函数卡({ 子项, 页眉, 页脚 }) { 返回（

{header &&

{header}

}

{子项}

{页脚 &&

{页脚}

}

）； } 标题} footer={}>

此处显示卡片内容

； ## 模式 2：复合组件从 'react' 导入 { createContext, use }; const TabsContext = createContext(null); 导出函数 Tabs({ Children, defaultTab }) { const [activeTab, setActiveTab] = useState(defaultTab); 返回（

{子项}

）； } 导出函数 TabList({ 孩子 }) { 返回

{children}

; } 导出函数 Tab({ id, Children }) { const { activeTab, setActiveTab } = use(TabsContext); 返回（ <按钮 className={activeTab === id ? '活动' : ''} onClick={() => setActiveTab(id)}> {孩子} ）； } 导出函数 TabPanel({ id, 儿童 }) { const { activeTab } = use(TabsContext); if (activeTab !== id) 返回 null; 返回

{children}

; } 用途： <选项卡defaultTab =“个人资料”> <选项卡列表> 个人资料设置 <简介/> <设置/> ## 模式 3：渲染道具函数 DataProvider({ 渲染, 端点 }) { const [数据，setData] = useState(null); 使用效果（（）=> { 获取（端点） .then((res) => res.json()) .then(setData); }, [端点]); 返回渲染（{数据，加载：！数据}）； } <数据提供者端点=“/api/用户” render={({ data, loading }) => (正在加载？ : )} />; 函数 Modal({ 儿童, isOpen, onClose }) { if (!isOpen) 返回 null; 返回（

e.stopPropagation()}> {孩子}

）； } 函数 ModalHeader({ 子对象 }) { 返回

{children}

; } 函数 ModalBody({ 子对象 }) { 返回

{children}

; } 函数 ModalFooter({ 儿童 }) { 返回

{children}

; } Modal.Header = ModalHeader; Modal.Body = ModalBody; Modal.Footer = ModalFooter; 用途： setShowModal(false)}> <模态标题>

确认操作

<模态体>

您确定要继续吗？

<模态页脚> 有关综合组合模式，请参阅：“research/react-19-compressive.md”第 1263-1293 行。 ## 应该 * 更喜欢组合而不是复杂的 prop API * 使用 Context 来表示复合组件状态 * 为调试提供良好的组件名称 ## 从不 * 过度设计简单的组件 * 对非协调组件使用 Context * 忘记处理边缘情况（孩子失踪等）

组合组件

包含技能