【React】props と children の違いについて

はじめに

業務中にchildrenを使った実装を行う際、propsとの違いが気になったため、調べてまとめました。

警告
この記事は個人的なアウトプットのため、誤った情報が含まれている可能性があります。間違いがありましたら、ご指摘をお願いいたします

propsとchildren

propsって何？

React コンポーネントは互いにやりとりをする際に props というものを使います。親コンポーネントは子コンポーネントに props を渡すことで情報を伝えることができるのです。props は HTML の属性と似ていると思われるかもしれませんが、props ではオブジェクトや配列、関数などのあらゆる JavaScript の値を渡すことができます。

propsはコンポーネント間でのデータのやりとりに使われます。

function Card(props) {
  return (
    <div className="card">
      <h2>{props.title}</h2>
      <p>{props.content}</p>
    </div>
  );
}

// 使用例
<Card title="カードのタイトル" content="カードの内容" />

このようにpropsを使うと、Cardコンポーネントは親から渡されたタイトルや内容を表示できます。

childrenって何？

children は、props である children から受け取った JSX を操作、変換するために用います。

コンポーネントのタグで囲まれた内容全体を渡すための特別なpropsです。

function Container({ children }) {
  return (
    <div className="container">
      {children}
    </div>
  );
}

// 使用例
<Container>
  <h1>これはタイトルです</h1>
  <p>これは説明文です</p>
</Container>

このようにすると、Containerコンポーネントは<h1>や<p>要素をchildrenとして受け取り、<div>の中に配置します。

注意点として、childrenはその名前でしか認識されないため、例えば次のように名前を変更すると機能しません。

function Container({ box }) {
  return (
    <div className="container">
      {box}
    </div>
  );
}

// 使用例
<Container>
  <h1>これはタイトルです</h1>
  <p>これは説明文です</p>
</Container>

このコードでは、Containerにchildrenではなくboxが指定されているため、囲まれた内容は表示されません。

propsとchildrenそれぞれの使い所

• propsはコンポーネント間でデータのやりとりに使用され、コンポーネントの内容や動作を柔軟に変更できます。

• childrenはコンポーネントが他のコンポーネントをラップする場合に使うと便利で、レイアウトを柔軟に構築できます。

終わりに

propsとchildrenの役割を理解したことで、コンポーネントの設計がより柔軟になりました。今後の実装でも使い分けを意識していきたいと思います。

参考

『React の Props と Children の違いをまとめてみた』
https://www.aki--dev.com/entry/2024/05/20/085500#:~:text=props%20%E3%81%A8%20children%20%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9,%E4%BD%9C%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82