码迷,mamicode.com
首页 > 其他好文 > 详细

五.this.props.chlidren

时间:2016-09-10 11:41:46      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:

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

<!DOCTYPE html>
<html>
  <head>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="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

标签:

原文地址:http://www.cnblogs.com/johnblog/p/5858927.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!