最終更新:2024-05-09 (木) 09:14:12 (15d)  

React/レンダープロップ
Top / React / レンダープロップ

Props を通じて JSX 要素をコンポーネントに渡すこと

https://ja.reactjs.org/docs/render-props.html

https://ja.legacy.reactjs.org/docs/render-props.html

メモ

  • ダイアログに対してヘッダーやフッターを「スロット」のように挿入したい場合、レンダープロップを使用するのが効果的
  • https://azukiazusa.dev/blog/react-memoized-component-children/
        <Dialog
          header={<h1>Header</h1>}
          footer={<button onClick={() => {} }>OK</button>}
        >
          <p>Content</p>
        </Dialog>

children

  • レンダープロップの特殊な構文
  • 下記は同義
    <Dialog>
      <p>Content</p>
    </Dialog>
    <Dialog children={<p>Content</p>} />

関連