Composition 组件组合
最后更新：2026-10-28
Composition 组件组合
React 推荐用组合而非继承复用组件：父组件把 JSX 作为 children 或自定义 prop 传进来，由通用容器（Card、Layout、Modal）决定「放哪里」，调用方决定「放什么」。children 就是最自然的插槽机制。
| 分组 | 组件模式 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
function Card({ children, footer }) {
return (
<div className="card">
<div>{children}</div> {/* 主内容插槽 */}
<div>{footer}</div> {/* 自定义插槽 prop */}
</div>
)
}
// 使用：<Card footer={<small>2026</small>}><p>正文</p></Card>返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
两个带标题的卡片面板，内容分别由调用方以 children 传入——Panel 只管外框，不关心内部结构。💡 要点
💡 提示 props.children 是隐式插槽；需要多个插槽时用具名 prop（如 header、footer）传 JSX。
ℹ️ 说明 组合让容器组件不依赖内容组件：Panel 不知道也不关心里面放了什么，天然解耦。
⚠️ 注意 不要用 cloneElement 或类继承去「注入」结构，绝大多数场景 children + props 更清晰可控。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q children 和普通 prop 有什么区别？
A children 是组件开闭标签之间的内容，JSX 语法上更自然；本质仍是 prop，完全可以和具名 prop 混用。
Q 怎么实现多个插槽？
A 定义多个 JSX 类型的 prop：<Modal header={…} footer={…}>{正文}</Modal>，组件内部分别渲染。
Q 组合和继承为什么选组合？
A React 官方立场：继承会让组件耦合父类实现；组合通过 props 传 JSX，灵活、可预测且无需类语法。
