五.this.props.chlidren

Posted 约翰·史密斯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了五.this.props.chlidren相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

gitlab 权限说明

Java基础入门五)之方法以及递归算法

五String在Java中是传“引用”

如何从活动意图到特定片段?

Yarn: 一个新的JavaScript模块管理器

准备两个月,面试五分钟,Java中高级岗面试为何越来越难?