Reactのpropsを使ってみる

Reactのコンポーネント間で、データの受け渡しをする際に使用するpropsについて簡単に使ってみます。

サンプルコード

親コンポーネントをParent.jsx、子コンポーネントをChild.jsxとして試してみます。
まずは実装前のParent.jsxです。

import Child from './Child.jsx'

export default function Parent() {
  return (
    <div className="parent">
      <p>Parent</p>
      <Child />
    </div>
  )
}

Child.jsxの内容は以下の通りです。

export default function Child() {
  return (
    <div className="child">
      <p>Child</p>
    </div>
  )
}

結果は、以下のような出力になります。

<div class="parent">
  <p>Parent</p>
  <div class="child">
    <p>Child</p>
  </div>
</div>

次にpropsを試してみます。
ParsonからChildにpersonとunitを渡すようにしてみます。

import Child from './Child.jsx'

export default function Parent() {
  return (
    <div className="parent">
      <p>Parent</p>
      <Child
        person={{ name: 'Roko', age: 18 }}
        unit={'Idios'}
      />
    </div>
  )
}

Childでは渡されたpersonとunitを表示するようにします。

export default function Child({ person, unit }) {
  return (
    <div className="child">
      <p>Child</p>
      <p>
      {person?.name}({person?.age})<br/>
      ユニット:{unit}
      </p>

    </div>
  )
}

これでParsonからChildに渡された値の出力を確認できました。

<div class="parent">
  <p>Parent</p>
  <div class="child">
    <p>Child</p>
    <p>Roko(18)<br>ユニット:Idios</p>
  </div>
</div>

propsにはデフォルト値を設定することもできます。
Childの方でunitに対してデフォルト値を設定してみます。

export default function Child({ person, unit = 'Idios' }) {
  return (
    <div className="child">
      <p>Child</p>
      <p>
      {person?.name}({person?.age})<br/>
      ユニット:{unit}
      </p>

    </div>
  )
}

unitの値を渡さないで使ってみます。

import Child from './Child.jsx'

export default function Parent() {
  return (
    <div className="parent">
      <p>Parent</p>
      <Child
        person={{ name: 'Roko', age: 18 }}
        unit={'Idios'}
      />
      <Child
        person={{ name: 'Rika', age: 20.2 }}
      />
    </div>
  )
}

unitのデフォルト値での出力が確認できました。

<div class="parent">
  <p>Parent</p>
  <div class="child">
    <p>Child</p>
    <p>Roko(18)<br>ユニット:Idios</p>
  </div>
  <div class="child">
    <p>Child</p>
    <p>Rika(20.2)<br>ユニット:Idios</p>
  </div>
</div>

注意点として、今回のような未設定の場合や値がundefinedの場合はデフォルト値が使われますが、nullや0の場合はデフォルト値は使われないようです。

最後にpropsの中のchildrenというプロパティを試してみます。
以下のようにChildを終了タグ付きにしてコンテンツをネストした際に、propsのchildrenプロパティで受け取ることができます。

import Child from './Child.jsx'

export default function Parent() {
  return (
    <div className="parent">
      <p>Parent</p>
      <Child
        person={{ name: 'Roko', age: 18 }}
        unit={'Idios'}
      />
      <Child
        person={{ name: 'Rika', age: 20.2 }}
      />
      <Child
        person={{ name: 'Ruri', age: 20 }}
        unit={'みたらし団'}
      >
        <p>chirdrenで受け取る内容</p>
      </Child>
    </div>
  )
}

Childにchildrenの表示を追加します。

export default function Child({ person, unit = 'Idios', children }) {
  return (
    <div className="child">
      <p>Child</p>
      <p>
      {person?.name}({person?.age})<br/>
      ユニット:{unit}
      </p>
      {children}
    </div>
  )
}

これでネストした部分の出力が確認できました。

<div class="parent">
  <p>Parent</p>
  <div class="child">
    <p>Child</p>
    <p>Roko(18)<br>ユニット:Idios</p>
  </div>
  <div class="child">
    <p>Child</p>
    <p>Rika(20.2)<br>ユニット:Idios</p>
  </div>
  <div class="child">
    <p>Child</p>
    <p>Ruri(20)<br>ユニット:みたらし団</p>
    <p>chirdrenで受け取る内容</p>
  </div>
</div>

今回はpタグを囲う形にしましたが、別のコンポーネントなどを囲って渡したりすることも可能です。