ReactJs中的this.props.children总结
2016-05-13 16:50
676 查看
this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点
上面代码的 NoteList 组件有两个 span 子节点,它们都可以通过 this.props.children 读取,运行结果如下。
hello
world
这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法,请参考官方文档 https://facebook.github.io/react/docs/top-level-api.html#react.children 。
输出结果为:
思考思考—-0
瞬间即逝—-1
阿达瓦得—-2
map遍历数组
var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>world</span> </NotesList>, document.body );
上面代码的 NoteList 组件有两个 span 子节点,它们都可以通过 this.props.children 读取,运行结果如下。
hello
world
这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。
React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法,请参考官方文档 https://facebook.github.io/react/docs/top-level-api.html#react.children 。
var HelloWorld = React.createClass({ render:function(){ return ( <ul> { React.Children.map(this.props.children, function (value,key) { return <li>{value}----{key}</li>; }) } </ul> ); } }); ReactDOM.render( <HelloWorld> <span>思考思考</span> <span>瞬间即逝</span> <span>阿达瓦得</span> </HelloWorld>, document.getElementById('root'));
输出结果为:
思考思考—-0
瞬间即逝—-1
阿达瓦得—-2
map遍历数组
var names = ['Alice', 'Emily', 'Kate']; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}!</div> }) } </div>, document.getElementById('example') );
相关文章推荐
- Windows下搭建React Native Android开发环境
- react native学习笔记
- React中input checked的使用
- react-0.14.7
- 使用 React和webpack开发和打包发布
- react-router学习笔记之入门
- What is a nuclear reactor?(核反应堆是什么)
- IO复用(Reactor模式和Preactor模式)——用epoll来提高服务器并发能力
- React Native学习安卓手机上的返回键BackAndroid
- 【解决】React setState延迟delay导致数据更新不及时,代码无法正确执行
- React Native布局篇
- React实战——基于百度IFE学院task50
- 如何建立基于CocoaPods的ReactiveCocoa工程
- [转]React 入门实例教程
- React-Native之flexbox布局篇
- react.js CMS 删除功能的实现
- ReactOS实现的兼容NT内核分析--KfLowerIrql函数
- React-Native入门指导之iOS篇 —— 一、准备工作
- Webpack打包React踩到的坑
- React入门-高清视频