props.children使用
1.代码如下:
class MyFirst extends React.Component {
render(){
return (
<div>
{
this.props.children
}
</div>
)
}
}
ReactDOM.render(
<MyFirst>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
</MyFirst>
,
document.getElementById('app')
)
//MyFirst组件渲染的DOM节点为
<div>
<span>A</span>
<span>B</span>
...
</div>
可以看出props.children属性表示的是,组件标签内的所有标签集合。
this.props.children===[<span>A</span>,<span>B</span>,...]