react教程之this.props.children
来源:互联网 发布:魔钢歼灭者淘宝价格 编辑:程序博客网 时间:2024/05/22 15:21
this.props.children
this.props
对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children
属性。它表示组件的所有子节点(查看 demo05
)。
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
读取,运行结果如下。
这里需要注意, 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
的方法,请参考官方文档。
0 0
- react教程之this.props.children
- react教程序之this.props.children
- react教程之this.props.children
- react this.props.children
- react native -- this.props.children
- React.js--this.props.children
- React list this.props.children
- React学习(五)this.props.children
- React学习笔记(2)-React.createClass、this.props.children
- react demo8 (设置组件自身属性this.props.children)
- ReactJs中的this.props.children总结
- ReactJs中的this.props.children总结
- React 之props属性
- React Native 之 Props
- react教程之this.state
- react更新props后this.props === nextProps
- React Native的this.props获取属性
- 第四节, this.props.children 获取子元素并插入
- mybatis,hibernate 的差异
- ios 应用之间的跳转
- JNI相关
- ON_STN_CLICKED函数
- 用angular-file-upload在上传文件的时候动态设置一同发送的参数
- react教程之this.props.children
- 编写Backbone.js的第一个应用,相当于Hello World!
- yii2yii2的jquery
- Find The Multiple poj 1426 bfs
- webupload 多个实例化上传按钮
- Vuex 笔记
- jQuery实现轮播图特效,仿京东——李帅醒博客
- JavaIP小练习
- state传参数