react/fluxでpropsのバケツリレーを避ける - Qiita

reactにfluxを採用してアプリケーションを設計していると、親->子->孫コンポーネントへpropsのバケツリレーになってしまう事がありました。 そもそもイケてない設計が悪いのですが、reactバケツリレーつらいという声を聞くことも多かったし、自分も辛いと思っていたところ助言をいただいて解決法が見えてきたのでまとめてみます。 propsバケツリレー まず、バケツリレーを再現してみます。 DOM構造 おおまかにdiv[class="app"](親), div[class="group"](子）, div[class="item"](孫)というツリー構造になってます。 <div class="app"><!--親--> <div class="group"><!--子--> <h2>1番目のグループ</h2> <p class="count">13</p> <div class="item

[kanz-labs]

こんな方法があるなんて

[tuki0918]

あるある

[uehaj]

JSXでの<A x=y>...<A>は、new A().render(props: { x:y, childlen:... })という呼び出しになる。はさみパターンに有効(<A><B/><A>を<a><c><b/></c></a>にする)

[ir_takt]

ReactのTodoMVCがこんな感じだった。FluxのTodoMVCしか見てなかったから知見不足してた

[nilab]

React/fluxでpropsのバケツリレーを避ける - Qiita

[wordi]

親-孫間のpropsのバケツリレーを、props.childrenに逃がす

[efcl]

親子孫の3点propsのバケツリレーについて