第四讲 React组件props中children的基本使用

Sian

1、第三讲中简单描述了React中props的基本使用，通过this.props.xxx即可以取到组件中xxx属性的值；
2、在this.props中的众多属性中，有一个叫“children”的属性比较特殊，该属性可以取到组件中子节点的集合；
3、通过React.Children.map()方法来遍历集合；
4、以实例来说明问题；
4.1、常规形态，在id为container的标签内部加入一个<div>，内部一个<h1>和<a>；

[JavaScript] 纯文本查看 复制代码

    ReactDOM.render(
      (
        <div>
        <h1>sian</h1>
        <a href="http://www.yusian.com">[url=http://www.yusian.com]www.yusian.com[/url]</a>
        </div>
      ),
      document.getElementById("container")
    );

4.2、如果不是<div>，而是自定义的一个<showWeb>呢？显示的结果是怎样？

[JavaScript] 纯文本查看 复制代码

    ReactDOM.render(
      (
        <ShowWeb>
        <h1>sian</h1>
        <a href="http://www.yusian.com">[url=http://www.yusian.com]www.yusian.com[/url]</a>
        </ShowWeb>
      ),
      document.getElementById("container")
    );

4.3、自定义<ShowWeb>组件的结构是这样的，说明在注释中

[JavaScript] 纯文本查看 复制代码

    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