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

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>} />
↑

関連




検索：