Hybrid开发

React.Children的用法

2019-03-18  本文已影响69人  youngss

React.Children是顶层API之一,为处理this.props.children这个封闭的数据结构提供了有用的工具。

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

1、React.Children.map

object React.Children.map(object children,function fn [, object context])

使用方法:

React.Children.map(this.props.children,function(child){

    return <li>{child}</li>

})

this.props.children.forEach(function(child){

   return <li>{child}</li>

})

在每一个直接子级(包含在 children 参数中的)上调用 fn 函数,此函数中的 this 指向 上下文。如果 children 是一个内嵌的对象或者数组,它将被遍历:不会传入容器对象到 fn 中。如果 children 参数是 null 或者 undefined,那么返回 null 或者 undefined 而不是一个空对象。

<script type="text/jsx">

var NotesList = React.createClass({

render:function() {

    return (

        <ol>  {

            React.Children.map(this.props.children, function (child) {

                return<li>{child}</li>;

                })

          }

</ol>);

    }

  });

React.render(

    <NotesList>

        <span>hello</span>

        <span>hello</span>

    </NotesList>,

    document.body );

</script>

这里需要注意,this.props.children的值有三种可能:如果当前组件没有子节点,它就是undefined;如果有一个子节点,数据类型是object;如果有多个子节点,数据类型就是array。所以,处理this.props.children的时候要小心。

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

传入如下ReactElement:

<NotesList>

    <span>hello</span>

    <span>hello</span>

</NotesList> //返回两个子节点

<NotesList></NotesList> //返回undefined

<NotesList>null</NotesList>//返回null

2、React.Children.forEach

React.Children.forEach(object children, function fn [, object context])

? 类似于 React.Children.map(),但是不返回对象。?

3、React.Children.count

number React.Children.count(object children)

返回 children 当中的组件总数,和传递给 map 或者 forEach 的回调函数的调用次数一致。

render: function() {

    console.log(React.Children.count(this.props.children)); //2

    return (

      <ol>

        {

          this.props.children.forEach(function (child) {

              return <li>{child}</li>

          })

        }

      </ol>

    );

  }

不同的ReactElement,输出count值:

<NotesList>

    <span>hello</span>

    <span>hello</span>

</NotesList>

console.log(React.Children.count(this.props.children)); //2

<NotesList></NotesList>

console.log(React.Children.count(this.props.children)); //0

<NotesList>null</NotesList>

console.log(React.Children.count(this.props.children)); //1

4、React.Children.only

object React.Children.only(object children)

返回children中仅有的子级。否则抛出异常。

这里仅有的子级,only方法接受的参数只能是一个对象,不能是多个对象(数组)。

console.log(React.Children.only(this.props.children[0]));

上一篇下一篇

猜你喜欢

热点阅读