首页 > 其他 > 详细

React.Children

时间:2017-07-11 17:32:32      阅读:342      评论:0      收藏:0      [点我收藏+]

一直分不清React.Children与this.props.children是什么关系。其实很简单,this.props.children是子组件的集合,相当于把子组件当做组件的属性传入。

this.props.children有三种情况:

1.没有子组件时,数据类型为undefined

2.只有一个子组件时,数据类型为object

3.有多个子组件时,数据类型为数组

 

React.Children是React提供用来处理this.props.children的API,不用考虑this.props.children的数据类型,React.Children有map、forEach、count等方法

渲染组件:

ReactDOM.render(
    <APP>
        <div data={1}></div>
        <div data={2}></div>
        <div data={3}></div>
    </APP>,
    document.getElementById(‘root‘)
);

组件内:

export default class APP extends Component {
    constructor(props){
        super(props);
    }
    render(){
        return (
            <ul>
            {React.Children.map(this.props.children,(child) =>{
                return (
                    <li>序号:{child.props.data}</li>
                )
            })}
            </ul>
            )
    }
}

 

React.Children

原文:http://www.cnblogs.com/lee1993/p/7151404.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!