react教程之this.props.children
来源:互联网 发布:购物车订单数据库设计 编辑:程序博客网 时间:2024/05/22 15:29
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
的方法,请参考官方文档。
- 顶
- 1
- 踩
阅读全文
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 获取子元素并插入
- 高精度压位模板
- AC自动机总结
- Lua 5.3 源码解读(一) VS 2015 编译源码
- 【Android】Service的生命周期
- 创建带图片的Toast提示
- react教程之this.props.children
- RQNOJ 117 最佳课题选择
- 文章标题
- 不可变对象
- Xposed实现短信拦截
- Promise对象的简单应用
- 全排列
- 学习Javascript闭包
- 华为LTE 模块AT 命令拨号上网流程