第四讲 React组件props中children的基本使用
1、第三讲中简单描述了React中props的基本使用，通过this.props.xxx即可以取到组件中xxx属性的值；2、在this.props中的众多属性中，有一个叫“children”的属性比较特殊，该属性可以取到组件中子节点的集合；
3、通过React.Children.map()方法来遍历集合；
4、以实例来说明问题；
4.1、常规形态，在id为container的标签内部加入一个<div>，内部一个<h1>和<a>；
ReactDOM.render(
(
<div>
<h1>sian</h1>
<a href="http://www.yusian.com">www.yusian.com</a>
</div>
),
document.getElementById("container")
);
4.2、如果不是<div>，而是自定义的一个<showWeb>呢？显示的结果是怎样？
ReactDOM.render(
(
<ShowWeb>
<h1>sian</h1>
<a href="http://www.yusian.com">www.yusian.com</a>
</ShowWeb>
),
document.getElementById("container")
);
4.3、自定义<ShowWeb>组件的结构是这样的，说明在注释中
var ShowWeb = React.createClass({
render:function(){
return (
<ol>
{
/**
* 获取组件<ShowWeb>的内部元素
1、使用React.Children.map()进行元素遍历；
2、该方法需要传入两个参数，第一个参数为需要遍历的数组，第二个参数为匿名函数；
2.1、this.props.xxx为组件的属性取值方式，获取组件的某个属性值通过该方式；
2.2、this.props.children是一个特殊属性，该属性取出的不是组件的某个属性，而是元素集合；
3、该方法的第二个参数为一个匿名函数，函数参数为遍历到的元素，返回值为处理过的数据；
4、通过该方式处理组件中的子元素
*/
React.Children.map(this.props.children, function(child){
// 遍历各元素需要执行的操作
return <li>{child}</li>;
})
}
</ol>
);
}
});
5、效果链接：www.yusian.com/react/props/children.html
页:
[1]