Layoutコンポーネント
何
コンポーネントの配置のみに責務を持つコンポーネント
この呼び方は正式名称ではなくkoushisa.iconが概念化するために勝手にそう呼び始めた 追記: 2023/08/16
koushisa.iconとほぼ同じ思想の記事
コンポーネントの分類
ロジックコンポーネント
レイアウトコンポーネント
ブロックコンポーネント
インラインコンポーネント
~
ルート以外のレイアウトコンポーネントは基本的に width: 100%, height: 100%; margin: 0; padding: 0; box-sizing: border-box; で display: grid or display: flex。 grid 推奨
実装イメージ
RootがLayoutコンポーネントを配置するとして、
https://scrapbox.io/files/63ead3f477f76b001c901b51.png
Layoutコンポーネントはコンポーネント結合の橋渡し役になる
<UserList users={users} Item={(user) => <UserItem user={user}/>} />
各コンポーネントのpropsの構造を作成する責務はLayoutの親
たとえば孫コンポーネントへのprops指定も、Layoutへ委譲できる
コンポーネントの配置とレイアウト及びスタイリングの分離
---