Reactを書くときのパターンメモ

Render Props

• propsに、RenderするReactElementを返す関数を渡す
• メリット
  • 親が子のなかでレンダーする内容(孫)を動的に変更することができる
  • 親が子の中の孫のレンダー内容を指定しつつ、子と孫で値の共有ができるようになる
  • 参考例 mae.chab.in
  • オブジェクト指向のデザインパターンでいうと、ストラテジーパターンに近い？
• 下記のように子から何か(stateのようなもの)を受け取って孫を表示することで、孫の内容は動的にしつつも、子と孫で状態を共有することができる。

render() {
  retrun (
    <div>
      {this.props.render(this.state)}
    </div>
  )
}