首页 > 代码库 > 五.this.props.chlidren

五.this.props.chlidren

this.props  对象属性与组件属性一一对应,但是有一个例外。就是this.props.chlidren属性。他表示组件里所有的子节点。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://www.mamicode.com/js/react.js"></script>
    <script src="http://www.mamicode.com/js/react-dom.js"></script>
    <script src="http://www.mamicode.com/js/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var NotList = React.createClass({

        render:function(){
          return (
              <ol>
                {
                  React.Children.map(this.props.children,function(child){
                      debugger;
                      return <li>{child}</li>
                  })
                }
              </ol>
            )
        }
      })
      ReactDOM.render(
        <NotList>
          <span>hello</span>
          <span>world</span>
        </NotList>,

        document.getElementById("example")
        )
    </script>
  </body>
</html>

上面代码NoteList组件有两个span节点。他们都通过this.props.children读取。

这里需注意 this.props.children的值有三种情况。

1.如果当前组件没有子节点。它就是underfine。

2.如果有一个子节点。它就是一个object。

3.如果有多个子节点。他就是一个array。

React提供一个工具方法来 React.Children来处理this.props.children.我们可以用React.Children.map()来遍历子节点。而不用担心 this.props.children 的数据类型是 undefined 还是 object

五.this.props.chlidren