客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
React.Children 是顶层API之一，为处理 this.props.children 这个封闭的数据结构提供了有用的工具。 this.props 对象的属性与组件的属性一一对应，但是有一个例外，就是 this.props.children 属性。它表示组件的所有子节点。 1、React.Children.map
object React.Children.map(object children, function fn [, object context])
使用方法：
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
其他方法
this.props.children.forEach(function (child) {
return <li>{child}</li>
})
在每一个直接子级（包含在 children 参数中的）上调用 fn 函数，此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组，它将被遍历：不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined，那么返回 null 或者 undefined 而不是一个空对象。
<script type="text/jsx">
var NotesList = React.createClass({
render: function() {
return (
<ol>
{
React.Children.map(this.props.children, function (child) {
return <li>{child}</li>;
})
}
</ol>
);
}
});
React.render(
<NotesList>
<span>hello</span>
<span>hello</span>
</NotesList>,
document.body
);
</script>
这里需要注意，
传入如下ReactElement： <NotesList> <span>hello</span> <span>hello</span> </NotesList> //返回两个子节点 <NotesList></NotesList> //返回undefined <NotesList>null</NotesList> //返回null 2、React.Children.forEachReact.Children.forEach(object children, function fn [, object context]) 类似于 React.Children.map()，但是不返回对象。 3、React.Children.count
返回 children 当中的组件总数，和传递给 map 或者 forEach 的回调函数的调用次数一致。
render: function() {
console.log(React.Children.count(this.props.children)); //2
return (
<ol>
{
this.props.children.forEach(function (child) {
return <li>{child}</li>
})
}
</ol>
);
}
不同的ReactElement，输出count值: <NotesList> <span>hello</span> <span>hello</span> </NotesList> console.log(React.Children.count(this.props.children)); //2 <NotesList></NotesList> console.log(React.Children.count(this.props.children)); //0 <NotesList>null</NotesList> console.log(React.Children.count(this.props.children)); //1 4、React.Children.only
返回 children 中 仅有的子级。否则抛出异常。 这里仅有的子级，only方法接受的参数只能是一个对象，不能是多个对象（数组）。 console.log(React.Children.only(this.props.children[0])); //输出对象this.props.children[0] 以上就是React.Children的用法详解的详细内容，更多关于React.Children的用法的资料请关注极客世界其它相关文章！ |
请发表评论