企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
[toc] ## React.Children和props.children区别 ![](https://box.kancloud.cn/0778276bb05594d600d6a83bd98b6cd2_555x136.png) ![](https://box.kancloud.cn/d3c790fe75b27b5f9964e072e620f096_564x135.png) React.Children下存放的是5个方法,而props.children存放的直接就是子元素 ## props.children值的五种情况 props.children的值有五种情况: 1. undefined,表示没有子元素 2. null 同上 3. string,表示有唯一子元素且为字符串 4. obj,表示有唯一子元素且是一个react-element(虚拟dom) 5. 数组,表示有**多**个子元素,每一项为上面情况中的一种 So,如果我们是通过props.children拿到的孩子,要遍历子元素,就需要处理5种情况 嗯。。。有点麻烦,推荐使用:`React.Children.map/forEach` 它会处理上面所的5种情况-->**确保**子元素是在一个数组中以便能够遍历。 ## React.Children.map ```javascript //children 为 this.props.children let React_Children = React.Children.map(children, (item, index) => { return item; }); ``` ![](https://box.kancloud.cn/45abfdad669dd3a04f163ebc26113fb8_605x115.png) 可以发现此时为undefined ![](https://box.kancloud.cn/cc3def15d19a7b0d2ab81423b853ccb6_325x136.png) 相较于`this.props.children`得到的孩子们,有一个很大不同在于,**有且仅有一个孩子时**,通过`React.Children.map`遍历得到的孩子会被放进一个空数组中,而this.props.children得到的孩子则不会(只有当孩子存在两个,两个以上时才会)