なぜthis.props.childrenを使用しますか？

Question

が「回答済み」の類似の質問がありますが、回答が完全ではなく、実際の問題は解決しません。

これは本当に副質問のある2つのパターです。

1. What are the general situations you would want to use this.props.children? 

    2. What are some specific situations with examples? 

私はドキュメントを読んでいますが、ドキュメントを引用するだけではありません。このquesitonため

動機：私はこの質問のためにこの質問の時点で、ドキュメントがやっときに使用することやメソッドを使用する方法の非常に非常に一般的な例を与えることである

理由しかし、この例は、私たちに真の文脈を与えていません。 IRLは使用できません。この例は、韻、理由、または正気に関して、アプリ全体に文字通り再利用される可能性があります。それは本当に大丈夫ですか？

私は、あなたが子供が渡されるかどうかわからないときに、この.props.childrenを使用すると言われています。しかし、技術的には、どんな変化が、より多くの、あるいは異なる子供を必要とする行に来るかも知れません。これはかなり曖昧です。

はまた、私はジェイク・トレントによって興味深い記事を見つけました：http://jaketrent.com/post/send-props-to-children-react/

記事は、あなたがきちんとしている、部品の種類に基づいて、これらの「未知の子供たち」に渡される小道具を追加/削除する方法を示しています（とおそらくあなたがサードパーティコンポーネントをビルドする際には良い考えです）。

私の大きなお持ち帰りは、これまであなたがthis.props.childrenを指定するときに、親に子供たちを支配する力を与えているということです、これは良い理由またはちょうど副産物ですか？ （例：proptypes、実際の型チェック...）しかし、

2a. What other things would/could/should you do here? 
    2b. What things should you not do? 

例下さい！

Answer 1

他のほとんどのHTML要素と同様に、props.childrenを一般的なラッパーとして使用するコンポーネントについて考えるのが嬉しいです。

fieldset要素について考えてみましょう。

<form action="/post"> 
    <input type="text" name="myValue" placeholder="Some Data" /> 
    <input type="submit" value="Submit!" /> 
</form> 

私たちはどのような形をしていますか？しかし、私はそれが異なって見えるようにしたい。フォームのように視覚的に見えるようにしたい。私はそれの周りにいくつかの境界線、ほんの少しのラベルそれを記述するために上のほうがいいように...ああ私はフィールドセットでそれを包むよ！

<fieldset> 
    <legend>A Pretty Form</legend> 
    <form action="/post"> 
     <input type="text" name="myValue" placeholder="Some Data" /> 
     <input type="submit" value="Submit!" /> 
    </form> 
</fieldset> 

今、私はどのように見えますか？この例を作るために少しlegendにも振りかける... 伝説の。

ただし、fieldsetは、HTMLコンテンツをグループ化するために使用できる特定の属性を持つ再利用可能なコンポーネントを提供します。子要素は、その機能とはまったく無関係です。

Reactで同じ原則を使用できますか？はい。そしてそれはずっと強力です！

特別なReactFieldsetコンポーネントを、独自の機能を持つHTML fieldsetに基づいて作成したいとします。私は誰もが時間を持っているので、それをすべてコード化するつもりはありませんか？しかし、あなたがReactFieldsetコンポーネントを作ったと想像してみましょう。それは、それ自身の機能を備えています：それは崩壊する可能性があり、動くことができる、あらゆる種類のことをすることができます！また、あらゆる種類のコンテンツを保持することもできます。

さて、あなたはそれがrender関数の中で行う必要があるすべては次のとおりです。

render() { 
    return <fieldset { ...superFunctionalityControllingProps }> 
    { this.props.children } 
    </fieldset> 
} 

多田！これで、独自の機能を持ち、子供を収容できる再利用可能なコンポーネントができました。

したがって、ポイントはです。子供が本当にそれほど重要ではない場合、this.props.childrenを使用することができます！実際にはコンポーネント自体に重点を置くことができますが、子供はちょうど家に入る任意のコンポーネントです。彼らは機能性に全く関係する必要はない。

これは、React Nativeで多く使用されています。多くの異なるコンポーネントには独自の機能がありますが、それらは単に「ラッパー」ビルディングブロックであるため、任意の子を収容することができます。