React.Childrenの詳しい使い方

React.Children は、 this.props.children の囲まれたデータ構造を操作するための便利なツールを提供するトップレベル API の 1 つです。

this.props オブジェクトのプロパティは、コンポーネントのプロパティと 1 対 1 で対応していますが、this.props.children プロパティは例外です。コンポーネントのすべての子ノードを表します。

1. React.Children.map

オブジェクト React.Children.map(オブジェクト children, 関数 fn [, オブジェクト context])
 
方向：
React.Children.map(this.props.children, 関数(child) {
  <li>{child} を返します。
})
その他のメソッド this.props.children.forEach(function (child) {
  <li>{child} を返します。
})

コンテキストを参照する this を使用して、各直接の子 (children パラメータに含まれる) に対して fn 関数を呼び出します。 children がネストされたオブジェクトまたは配列である場合、反復処理されます。コンテナ オブジェクトは fn に渡されません。 children パラメータが null または undefined の場合、空のオブジェクトの代わりに null または undefined が返されます。

<script type="text/jsx">
 var NotesList = React.createClass({
  レンダリング: 関数() {
   戻る （
    <オル>
     {
      React.Children.map(this.props.children, 関数(child) {
          <li>{child} を返します。
        })
     }
    </ol>
   );
  }
 });
 
 React.render() で
  <メモリスト>
   <span>こんにちは</span>
   <span>こんにちは</span>
  </NotesList>,
  文書本体
 );
</スクリプト>

ここで、 this.props.childrenには 3 つの値があることに注意してください。現在のコンポーネントに子ノードがない場合、 undefinedなります。子ノードが 1 つある場合、データ型はobjectになります。子ノードが複数ある場合、データ型はarrayになります。したがって、 this.props.childrenを扱うときは注意してください。

React 、 this.props.childrenを処理するためのユーティリティ メソッドReact.Childrenを提供します。 React.Children.mapを使用すると、 this.props.childrenのデータ型がundefinedかobjectかを気にせずに、子ノードを反復処理できます。

次の ReactElement を渡します。

<メモリスト>
  <span>こんにちは</span>
  <span>こんにちは</span>
</NotesList>
// 2 つの子ノードを返します <NotesList></NotesList>
//未定義を返す
 
 
<NotesList> なし</NotesList>
//nullを返す

2. React.Children.forEach

React.Children.forEach(オブジェクト children, 関数 fn [, オブジェクト context])

React.Children.map() に似ていますが、オブジェクトを返しません。

3. React.Children.count

数値 React.Children.count(オブジェクト children)

子のコンポーネントの合計数を返します。これは、map または forEach に渡されたコールバック関数の呼び出し回数に対応します。

レンダリング: 関数() {
  console.log(React.Children.count(this.props.children)); //2
 
  戻る （
   <オル>
    {
     this.props.children.forEach(関数 (child) {
       <li>{child} を返します。
     })
    }
   </ol>
  );
 }

さまざまな ReactElements 出力カウント値:

<メモリスト>
  <span>こんにちは</span>
  <span>こんにちは</span>
</NotesList>
console.log(React.Children.count(this.props.children)); //2
 
<ノートリスト></ノートリスト>
console.log(React.Children.count(this.props.children)); //0
 
<NotesList> なし</NotesList>
console.log(React.Children.count(this.props.children)); //1

4. 子どものみに反応する

オブジェクト React.Children.only(オブジェクト children)

children 内の唯一の子を返します。それ以外の場合は例外をスローします。

ここでの唯一の子である only メソッドは、複数のオブジェクト (配列) ではなく、単一のオブジェクトのみをパラメーターとして受け入れることができます。

コンソールにログ出力します。 
//出力オブジェクト this.props.children[0]

以上がReact.Childrenの使い方を詳しく解説した内容です。React.Childrenの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください！