React：通常のダムコンポーネントと再利用可能なコンポーネントを接続する方法

Question

ReactベースのWebアプリケーションを開発するとき、コンポーネントをスマートとダムに分割し、再利用可能でカスタムにすることがよくあります。 再利用可能な構成要素は、例えば、 <RedButton>または<CustomSelect>などですが、<FluxStoreBinder>などのミドルウェアコンポーネントであってもかまいません。ミドルウェアコンポーネントは、通常、Fluxストアへの購読/購読、または他のステートフルなものへのラッピングなど、いくつかの機能を追加しながら、childrenをレンダリングします。しかし、再利用可能なスマートミドルウェアコンポーネントをダムコンポーネントに接続するには、その小道具が適合しない可能性があるため、余分な作業が必要になります。例えば。 <FluxStoreReader>はdataという名前のプロパティを返しますが、<ToDoList>の子はtoDoItemsと予測されます。

質問したいのは、ミドルウェアコンポーネントにどのような方法でレンダリングするかを伝えることです。適切で推奨されるアプローチは何ですか？このようrender={({arg1}) => <Child prop1={arg1}/>}として、小道具を通じて機能を提供することにより

1. ：現在、私はどのようにその子をレンダリングするためのミドルウェアコンポーネントを伝えるの3つの方法を見てきました。機能は次のとおりです。この関数内で自分の状態/ props/etcにアクセスできます。あなたはプロップを処理して再マップすることができます。条件に応じてレンダリングする子を指定できます。ミドルウェアコンポーネントを介してプロキシする必要なく、必要な小道具を子供に設定することができます。

2. React.cloneElement(children, props)を返すことによって、propsをリマップする機能を提供します。

3. React.cloneElement(children, props)をレンダリングし、受信した小道具を子にプロキシすることによって、純粋なコンポーネントアプローチ、コールバックなし。これは、上記2の機能/柔軟性を持たず、さらにいくつかの作業が必要です。ミドルウェアとその子の間に別のミドルウェアが必要です。

4. Mike Tronicが提案する4番目のオプションは、基本的にコンポーネントファクトリである高次コンポーネントを使用することです。必要な引数の1つが子コンポーネントクラスです。それは＃3とほとんど同じですが、あなたが工場を走らせると、子供のタイプを変更することさえできません。

あなたのアプリケーションにはどちらの方法を選択しましたか？どうして？思いを共有してください。

リアクションの男の意見を聞いてうれしいです。

Answer 1

check https://www.youtube.com/watch?v=ymJOm5jY1tQ 
 
http://rea.tech/reactjs-real-world-examples-of-higher-order-components/ and 
 
http://www.darul.io/post/2016-01-05_react-higher-order-components 
 
What are Higher Order Components? 
 
A Higher Order Component is just a React Component that wraps another one. 
 
This pattern is usually implemented as a function, which is basically a class factory (yes, a class factory!), that has the following signature in haskell inspired pseudocode 
 
hocFactory:: W: React.Component => E: React.Component 
 
Where W (WrappedComponent) is the React.Component being wrapped and E (Enhanced Component) is the new, HOC, React.Component being returned. 
 
The “wraps” part of the definition is intentionally vague because it can mean one of two things: 
 
Props Proxy: The HOC manipulates the props being passed to the WrappedComponent W, 
 
Inheritance Inversion: The HOC extends the WrappedComponent W. 
 
We will explore this two patterns in more detail. 
 
What can I do with HOCs? 
 
At a high level HOC enables you to: 
 
Code reuse, logic and bootstrap abstraction 
 
Render Highjacking 
 
State abstraction and manipulation 
 
Props manipulation 
 
We will see this items in more detail soon but first, we are going to study the ways of implementing HOCs because the implementation allows and restricts what you can actually do with an HOC.