React组件为何识别children属性？两种包装写法原理探究

嘿，这个问题问得特别到位，我来给你把底层逻辑拆解明白～

首先：React组件为啥能识别children属性？ #

这其实是React的内置约定：不管是函数组件还是类组件，当你在JSX里给组件嵌套内容时，React会自动把这些嵌套内容打包成props.children传递给组件。

比如你写：

<MyCustomComponent>
  <p>我是子内容</p>
</MyCustomComponent>

React就会把<p>我是子内容</p>这个虚拟DOM节点，放到MyCustomComponent的props.children里，你在组件里直接用props.children就能拿到它。

你的第一种写法就是手动把props.children放到div里渲染，这完全符合React的设计逻辑。

然后：第二种写法里的{...props}为啥能替代{props.children}？ #

你第二种写法用了ES6的扩展运算符{...props}，它的作用是把组件收到的所有props（包括children）全部传递给内部的div。

比如当你调用这个包装组件时：

<BoldWrapper>我要加粗的文字</BoldWrapper>

此时组件的props对象里就包含children: "我要加粗的文字"，{...props}会把这个children属性和其他可能存在的props（比如你之后加的className、onClick等）一起传递给div，div自然就会渲染children内容，效果和第一种写法完全一致，但更灵活——如果之后需要给这个包装组件传递其他属性，不用修改组件代码就能直接透传给内部的div。

最后：React里的原生div能识别children吗？ #

当然可以！React对所有原生DOM元素（div、p、span等）做了封装，它们本质是React创建的虚拟DOM节点，同样遵循React的children约定。

当你写：

<div style={{ fontWeight: "bold" }}>我是加粗文字</div>

React会把"我是加粗文字"作为children属性传递给这个虚拟div节点，最终渲染成真实DOM时，就会把这段文字放到真实的div标签里。

简单说，原生元素在React里的children处理逻辑和自定义组件是打通的，你可以把children理解为React用来处理嵌套内容的统一机制，不管是自定义组件还是原生元素都支持。

内容的提问来源于stack exchange，提问作者dragonfly