React：React.Children apiが必要なユースケース

Question

React.Children apiのユースケースを探してみてください。ドキュメントを読むことは混乱します。ここでは（Vを反応する。15.2.0）

https://facebook.github.io/react/docs/top-level-api.html#react.children

彼らはthis.props.childrenが'不透明なデータ構造'であることを、言います。しかし、クロム開発ツールでデバッグすると、childrenが配列であるように見えます。 React.Children.mapまたはReact.Children.toArrayのような関数は、最初のものの代わりにArray.prototype.mapを使用でき、最後のものが元のchildrenプロパティと同じ結果を生成するので、あまり意味がありません。

私にとっては、ドキュメントが古くなっているようです（私は反応0.14。*​​を使用しなかったため、そこにどのような状況があるかわかりません）、または何か不足しています。もし誰かが説明できればうれしい。

ありがとうございました。

Answer 1

React.Childrenは、ドキュメントで説明されているように、コンポーネントの子のためのユーティリティのセットです。この場合（JSX）では：

<div> 
    <span>Foo</span> 
    <span>Bar</span> 
</div> 

あなたdivのchildrenは2つのspanの配列になります。 divは、単一の子供を持っていますが、SomeCustomElementでthis.props.childrenはnullになり、この場合、

<div> 
    <SomeCustomElement/> 
</div> 

：自動閉鎖要素を考えてみましょう。したがって、children小道具は厳密なタイピング規則に従わないので、this.props.children.mapに電話をかけようとするとエラーが発生することがあります。

React.Childrenの2つのことがあります。 this.props.childrenがnullであるかどうか、配列、キー付きの断片なのかどうか気にすることができないいくつかの一般的なツールを提供することで、前述のように「修正」します（一部は回避されます）。if 、switchとその子を反復するだけです。また、前方互換性も保証します。より良い方法は、nullの代わりに空の配列を提供する厳密な型に固執し、唯一の子がキー付きフラグメントである場合には単一の要素を持つ配列などとすることができます。

Answer 2

JavaScriptのどの部分も本当に不透明です。ここでの取り引きは、Reactチームが現在の実装childrenを実装の詳細とみなしていることです。

データを不透明なものとして扱い、React.Children APIを使用してアクセスするように指示します。これにより、将来、既存のアプリケーションを壊すことを心配することなく、基礎データ構造を自由に変更できます。

React.Children APIを使用せず、基礎となるArrayプロトタイプメソッドを使用すると、サポートされていない実装の詳細が使用されているため、新しいバージョンのReactでコードが機能しなくなる可能性があります。