[React] props.childrenに値を入れたときの挙動

Reactのprops.childrenに値を入れてみたときの挙動が気になったので試してみた。
先に結論。子要素がある場合はprops.childrenに子要素に差し込まれるけど、子要素がないなら自由に使える。

環境

    "react": "^16.13.1"
    "react-dom": "^16.13.1"

前提知識

Reactにおいてprops.childrenは子要素の値が格納されている予約後。

const WithPizza = (props) => <div>{props.children}🍕</div>

ReactDOM.render(
	<WithPizza>Hello World</WithPizza>,
	document.getElementById('root')
)

// => Hello World🍕

• React 用語集 – React

childrenプロパティに値を入れてみる

実験的にあえてchildrenプロパティに値を入れたときの挙動がどうなるか見てみる。

下記の計4ケースでそれぞれ確認。

• 子要素を持つ／持たない
• childrenプロパティを持つ／持たない

const Wrap = ({ children, text }) => (
  <div>
    <h2>{text}</h2>
    <li>children: {children}</li>
  </div>
);

function App() {
  const Case1 = <Wrap text="CASE1" />
  const Case2 = <Wrap text="CASE2"><span>🍎</span></Wrap>
  const Case3 = <Wrap text="CASE3" children="🐠" />
  const Case4 = <Wrap text="CASE4" children="🐠"><span>🍎</span></Wrap>

  return (
    <div>
      {Case1}
      {Case2}
      {Case3}
      {Case4}
    </div>
  );
}

この結果が下記の通り。

Case1〜Case2は一般的な挙動。Case3〜Case4は違和感はないが、どうしてそうなるかのもう少し正確に知りたいところ。

ロギングしてみる

<Wrap /> などのJSXは、React.createElementのシンタックスシュガーです。
ここではReact.createElementによって生成されたオブジェクトのpropsプロパティをロギングして確認する。

function App() {
  // ...

  const Case1 = <Wrap text="CASE1" />
  console.log('Case1', Case1.props.children)
  // => undeifned

  const Case2 = <Wrap text="CASE2"><span>🍎</span></Wrap>
  console.log('Case2', Case2.props.children)
  // => { type: "span", props: { children: "🍎" }, ... }
　// ReactElementですね

  const Case3 = <Wrap text="CASE3" children="🐠" />
  console.log('Case3', Case3.props.children)
  // => 🐠

  const Case4 = <Wrap text="CASE4" children="🐠"><span>🍎</span></Wrap>
  console.log('Case4', Case4.props.children)
  // => { type: "span", props: { children: "🍎" }, ... }
　// ReactElementですね

  // ...
}

Case3とCase4で比較するとわかりやすい。

Case3ではchildrenプロパティに入れていた文字列が、Case4では子要素によって差し替えられている。

結論

• 子要素があるときは、props.childrenに子要素が差し込まれる
• 子要素がないときは、props.childrenを好きに使える
• とはいえ、バグの温床だしprops.childrenは予約後なので子要素の取り出し以外には使うな