コンポーネントを小道具として渡しますか？ Compositional vs Higher Order Components

Question

Reactアプリケーションのレイアウトレベルのコンポーネントをいくつか作成しています。私が理解しているように、私が利用できる2つの主要な設計パターンがあります - 構成的なコンポーネントと高次のコンポーネント。

コンフィグレーションスタイルのラッパーコンポーネントを作成するときに、props.childrenを使用する必要があると思っていますか？

また、2つの異なるコンポーネント（下の高次コンポーネントの例のように）を渡したい場合は、という高次コンポーネントのスタイルを使用する必要があると思いますか？

組成：

const CenteredColumn = props => (
    <div className="columns"> 
    <div className="column is-8 is-offset-2">{props.children}</div> 
    </div> 
); 

高次コンポーネント：

const withTwoColumns = ({ first, second }) => (
    <div className="columns"> 
    <div className="column">{first}</div> 
    <div className="column">{second}</div> 
    </div> 
); 

Answer 1

はい、あなたは正しいです。 コンポジションスタイルを使用すると、子供がコンポーネントを持っていることを知る前にコンポーネントに事前に渡すことができます。だから我々はこれを行うことができます：

を参照してください。https://facebook.github.io/react/docs/composition-vs-inheritance.html

だから、H1とpタグに、「fancyborder」のクラス名を持つdiv要素は、それらを囲む/ /ラップをカバーします。

HOCSに関しては、あなたも正しいです。それらは入力として他のコンポーネントを受け取り、コンポーネントを出力としてレンダリングするコンポーネントです。

私はコードを提供していません。私はタッチデバイスを使いました。これが助けてくれたらと思っています。

Answer 2

あなたがあなたのレイアウトを設定する必要があります方法はpresentatational（ステートレス）コンポーネントにワークフローやのproyect構造を分割することによってである

プレゼンテーションコンポーネントは、メインコンポーネントからのみ小道具を受け取りますが、コンテナコンポーネントには、アプリケーションのロジック

Answer 3

どちらも機能します。それを書いている方法から、コーディングスタイル/階層的な選択です。リアクションのための反パターンがありますが、これはその1つではありません。