React.Children 是頂層API之一，為處理 this.props.children 這個(gè)封閉的數(shù)據(jù)結(jié)構(gòu)提供了有用的工具。

this.props 對(duì)象的屬性與組件的屬性一一對(duì)應(yīng)，但是有一個(gè)例外，就是 this.props.children 屬性。它表示組件的所有子節(jié)點(diǎn)。

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>
})

在每一個(gè)直接子級(jí)（包含在 children 參數(shù)中的）上調(diào)用 fn 函數(shù)，此函數(shù)中的 this 指向 上下文。如果 children 是一個(gè)內(nèi)嵌的對(duì)象或者數(shù)組，它將被遍歷：不會(huì)傳入容器對(duì)象到 fn 中。如果 children 參數(shù)是 null 或者 undefined，那么返回 null 或者 undefined 而不是一個(gè)空對(duì)象。

<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 的值有三種可能：如果當(dāng)前組件沒(méi)有子節(jié)點(diǎn)，它就是 undefined ;如果有一個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類型是 object ；如果有多個(gè)子節(jié)點(diǎn)，數(shù)據(jù)類型就是 array 。所以，處理 this.props.children 的時(shí)候要小心。

React 提供一個(gè)工具方法 React.Children 來(lái)處理 this.props.children 。我們可以用 React.Children.map 來(lái)遍歷子節(jié)點(diǎn)，而不用擔(dān)心 this.props.children 的數(shù)據(jù)類型是 undefined 還是 object。

傳入如下ReactElement：

<NotesList>
  <span>hello</span>
  <span>hello</span>
</NotesList>
//返回兩個(gè)子節(jié)點(diǎn)
 
 
<NotesList></NotesList>
//返回undefined
 
 
<NotesList>null</NotesList>
//返回null

2、React.Children.forEach

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

類似于 React.Children.map()，但是不返回對(duì)象。

3、React.Children.count

number React.Children.count(object children)

返回 children 當(dāng)中的組件總數(shù)，和傳遞給 map 或者 forEach 的回調(diào)函數(shù)的調(diào)用次數(shù)一致。

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 中 僅有的子級(jí)。否則拋出異常。

這里僅有的子級(jí)，only方法接受的參數(shù)只能是一個(gè)對(duì)象，不能是多個(gè)對(duì)象（數(shù)組）。

console.log(React.Children.only(this.props.children[0])); 
//輸出對(duì)象this.props.children[0]

以上就是React.Children的用法詳解的詳細(xì)內(nèi)容，更多關(guān)于React.Children的用法的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論