React で this.props.children に新しい Props を渡す - 無駄と文化

React でカスタムコンポーネントを作るとき、コンポーネントの子要素には this.props.children でアクセスできます。 この this.props.children はそのままレンダリングすることもできるのですが、何かしらの Props を渡したくなったらどうするのでしょうか。 ざっくり調べた感じ Stack Overflow とか海外のブログにしか情報が無いようだったのでまとめてみます。 TL;DR いきなり結論から、 this.props.children に直接 Props を渡すことはできません。 代わりの方法として、React.cloneElement() で React要素をクローンする時に Props を渡すことができるので、this.props.children をクローンしつつ Props を渡せばいいようです。 デモを用意しました。 デモ ソース リポ

[todays_mitsui]

久しぶりにブログ書きました。React で this.props.children を扱うためのあれこれについて。[React][javascript]