children 子内容 children

最后更新：2026-10-28

children 是一个特殊的 prop：组件开闭标签之间的内容会自动成为 props.children。它让组件可以「包裹」任意内容，是布局组件、弹窗、卡片等通用容器的基础机制。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

function Card({ children }) {
  return <div className="card">{children}</div>
}

<Card>标签之间的内容会自动传入 children</Card>

children	组件标签之间的内容：字符串、JSX、数组甚至函数都会成为这个特殊的 prop。

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

两个蓝色圆角卡片：第一张只包着一行文字，第二张包着加粗标题、一段说明和一个按钮——同一个 Card 容器组件包裹了完全不同的内容。

💡 提示 children 让组件只关心「怎么包」，不管「包什么」——这是组合优于继承的核心工具。

ℹ️ 说明 children 可以是字符串、元素、数组，甚至是函数（render-props 模式）。

⚠️ 注意 当传入多个子元素时 children 是数组，不要假设它一定是单个元素。

更多案例整理中，敬请期待。

Q props.children 是什么？

A 它是组件开闭标签之间的内容，由 React 自动作为名为 children 的 prop 传入，常用于做布局、卡片、弹窗等容器组件。

Q children 一定可以当数组用吗？

A 不一定：单个子元素时它是元素本身，多个才是数组。需要确定结构时可用 React.Children 提供的工具方法处理。

Q children 和普通 prop 怎么选？

A 「嵌套内容」用 children 更自然（弹窗、布局）；「配置数据」用命名 prop（标题、颜色），两者经常搭配使用。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。