https://zenn.dev/terrierscript/articles/2018-10-24-react-children

導入：Reactの`children`

Reactのchildrenを使うことで、子要素をwrapするような子要素を記述することが出来る。railsのviewで言えばyieldみたいなもの。

const SomeLabel = ({children}) => {
  return <div>{children}</div>
}

// 呼び出し側
<SomeLabel>
  // 子要素の拡張に対して、`SomeLabel`は関心を持たなくて良い。
  <SomeDecoration>Hello</SomeDecoration><SomeLabel>

これを覚えるとだいぶReactをきれいに書きやすくなるイメージがある。

本題：複数の子要素を柔軟に扱いたいときにどう考えるか？

例えば何かtitle, author,bodyを貰って記事を表示するような<Post>を考える。

<Post title={"aaa"} author={"bob"} body={"ほげほげ"} />

ここでは一番単位の大きそうなbodyをメインのchildrenとすること考えてみる。

<Post title={"aaa"} author={"bob"} >
  <div>ほげほげ</div></Post>

このままだと、bodyの部分は加工がしやすくなったが、titleを加工するならどうするか？ということを考える。

手法1. そのままにpropsでElementを定義する

一番ライトな手法。

呼び出し側は若干辛いが、そのままでも加工は出来る。

const MyPost = () => (
  <Post title={<BazDecorate>Titleですよ</BazDecorate>} author="bob">
    <FooDecorate>ほげ</FooDecorate>
  </Post>
)

const Post = ({title, author, children}) => {
  return <div>
    <div>{title} : {author}</div>
    <div>{children}</div>
  </div>
}

titleの部分を切り出す事で多少見栄えはマシになる。パフォーマンスは悪そう。

const MyPost = () => {
  const titleNode = (<BazDecorate>Titleですよ</BazDecorate>)
  return <Post title={titleNode} author="bob">
    <FooDecorate>ほげ</FooDecorate>
  </Post>
}

導入：Reactのchildren

本題：複数の子要素を柔軟に扱いたいときにどう考えるか？

手法1. そのままにpropsでElementを定義する

手法2. childrenの配列を展開する

導入：Reactの`children`