React.Children
2016-02-23 10:48
639 查看
来源
1、
在每一个直接子级(包含在 children 参数中的)上调用 fn 函数,此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组,它将被遍历:不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined,那么返回 null 或者 undefined 而不是一个空对象。
这里需要注意,
传入如下ReactElement:
2、
React.Children.forEach(object children, function fn [, object context])
类似于 React.Children.map(),但是不返回对象。
3、
number React.Children.count(object children)
返回 children 当中的组件总数,和传递给 map 或者 forEach 的回调函数的调用次数一致。
不同的ReactElement,输出count值:
4、
object React.Children.only(object children)
返回
这里仅有的子级,only方法接受的参数只能是一个对象,不能是多个对象(数组)。
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>
这里需要注意,
this.props.children的值有三种可能:如果当前组件没有子节点,它就是
undefined;如果有一个子节点,数据类型是
object;如果有多个子节点,数据类型就是
array。所以,处理
this.props.children的时候要小心。
React提供一个工具方法
React.Children来处理
this.props.children。我们可以用
React.Children.map来遍历子节点,而不用担心
this.props.children的数据类型是
undefined还是
object。
传入如下ReactElement:
<NotesList> <span>hello</span> <span>hello</span> </NotesList> //返回两个子节点 <NotesList></NotesList> //返回undefined <NotesList>null</NotesList> //返回null
2、
React.Children.forEach
React.Children.forEach(object children, function fn [, object context])
类似于 React.Children.map(),但是不返回对象。
3、
React.Children.count
number React.Children.count(object children)
返回 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
object React.Children.only(object children)
返回
children中 仅有的子级。否则抛出异常。
这里仅有的子级,only方法接受的参数只能是一个对象,不能是多个对象(数组)。
console.log(React.Children.only(this.props.children[0])); //输出对象this.props.children[0]
相关文章推荐
- Android React Native环境配置以及第一个实例
- 加载本地reactJs文件--新手向
- 跟着React Native的趋势
- React Native学习笔记-1:JSC profiler is not supported.
- React Native 中 ES6+ 和 ES5 语法比较
- 学习React Native的第一天
- react学习笔记2
- React复合组件
- Mac上react native 初步尝试
- react-native 之style
- React富交互性的动态用户界面
- react学习笔记1
- React Native 学习笔记(一)
- React Native中的flexbox布局
- Mac OSX系统搭建React natvie for android 开发环境
- ReactJS数据呈现
- 为什么使用React
- React图片上传组件设计
- Reactor Cooling
- 用TypeScipt和AMD模块化理念实现React官方教程(二)教程服务器搭建