标签:define efault 情况 nbsp str xtend return exp ops
一直分不清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>
)
}
}
标签:define efault 情况 nbsp str xtend return exp ops
原文地址:http://www.cnblogs.com/lee1993/p/7151404.html