React入門 - Part4.1 - 親子間コンポーネントへの値の受け渡し - props編

目次

propsとは

こことかこことか公式サイトによると

親コンポーネントから子コンポーネントへ値を渡すための仕組み

とか

親コンポーネントから渡されたプロパティ

という役割らしいです。

あんまり深く考えないでください。
引数みたいなやつ
と感じ取ってください。
（考えるな。感じｒ）

propsはPropertiesの略らしいです。
この方がイメージ湧きやすいでしょうか。

propsは値だけでなく、function(イベント)やstyleなども入れて渡せます。

ちなみに、読み取り専用らしいです。
あんまり意識したこと無かったですが、そうらしいです。

さっそくpropsを使ってみよう

Part3で、Child1～3コンポーネントを作って親コンポーネントで使用し表示したかと思いますが、

Child1～3は表示内容が少し違うだけで、機能は同じ
なので
Childコンポーネント一つに纏めて
表示内容を
propsで親コンポーネントから渡す
ということをしてみたいと思います。

１．ファイルchild2.tsx, child3.tsxを削除します。
２．child1.tsxをchild.tsxに変更します。
３．child.tsxのコンポーネント名を変更します。
４．child.tsxでpropsを受け取れるようにします。

export const Child: React.FC<{description: string}> = props => {

又は

type Props = {
    description: string;  // 説明
}

export const Child: React.FC<Props> = props => {

主にこんな書き方になると思います。

９．親コンポーネントを書き換えます。

import React from 'react'
import Child from './child';

export const Parent: React.FC = () => {

    /** レンダー部分 */
    return (
        <>
          <span>{'私は親です'}</span>
          <ul>
            <Child description={'長男'}/>
            <Child description={'次男'}/>
            <Child description={'三男'}/>
          </ul>
        </>
    )
}

export default Parent;

完成！
動作確認してみてください。

propsに他の要素も追加し親から子へ渡してみよう

親コンポーネント

import React from 'react'
import Child from './child';

export const Parent: React.FC = () => {

    /** レンダー部分 */
    return (
        <>
          <span>{'私は親です'}</span>
          <ul>
            <Child description={'長男'} gender={'man'}/>
            <Child description={'次男'} gender={'man'}/>
            <Child description={'三男'} gender={'man'}/>
            <Child description={'長女'} gender={'woman'}/>
          </ul>
        </>
    )
}

export default Parent;

子コンポーネント

import React from 'react'

type Props = {
    gender: 'man' | 'woman';  // 性別
    description: string;      // 説明
}

export const Child: React.FC<Props> = props => {

    /** レンダー部分 */
    return (
        <li>{'私は' + props.description + 'です。性別は' + props.gender + 'です。'}</li>
    )
}

export default Child;

propsをスプレッド構文を使用し簡単に書く

親コンポーネント

import React from 'react'
import {Child, Props} from './child';

export const Parent: React.FC = () => {

    const params1: Props  = {
      description: '長男',
      gender: 'man',
    }

    /** レンダー部分 */
    return (
        <>
          <span>{'私は親です'}</span>
          <ul>
            <Child {...params1}/>
            <Child description={'次男'} gender={'man'}/>
            <Child description={'三男'} gender={'man'}/>
            <Child description={'長女'} gender={'woman'}/>
          </ul>
        </>
    )
}

export default Parent;

子コンポーネント

import React from 'react'

export type Props = {
    gender: 'man' | 'woman';  // 性別
    description: string;      // 説明
}

export const Child: React.FC<Props> = props => {

    /** レンダー部分 */
    return (
        <li>{'私は' + props.description + 'です。性別は' + props.gender + 'です。'}</li>
    )
}

export default Child;

propsの数が増えた場合は便利かもしれませんね。

propsにイベントを追加し親から子へ渡してみよう

親コンポーネント

import React from 'react'
import {Child, Props} from './child';

export const Parent: React.FC = () => {

    /** イベント */
    const eventTest = () => {
      console.log('イベント発生！')
    }

    const params1: Props  = {
      description: '長男',
      gender: 'man',
      evt: eventTest
    }

    /** レンダー部分 */
    return (
        <>
          <span>{'私は親です'}</span>
          <ul>
            <Child {...params1}/>
            <Child description={'次男'} gender={'man'} evt={eventTest}/>
            <Child description={'三男'} gender={'man'} evt={eventTest}/>
            <Child description={'長女'} gender={'woman'} evt={eventTest}/>
          </ul>
        </>
    )
}

export default Parent;

子コンポーネント

import React from 'react'

export type Props = {
    gender: 'man' | 'woman';  // 性別
    description: string;      // 説明
    evt: () => void;          // イベント
}

export const Child: React.FC<Props> = props => {

    /** レンダー部分 */
    return (
        <li>
            {'私は' + props.description + 'です。性別は' + props.gender + 'です。'}
            <button onClick={props.evt}>ボタンです。</button>
        </li>
    )
}

export default Child;

細かい説明を省きました。逆に。
propsはReactで重要かと思いますので、よく理解してください。

また、イベントも引き渡しましたが、書き方による動作の違いがあるようですので
そのあたりも調べてみましょう。

• eventTest
• eventTest()
• () => eventTest()

イベントへの引数の渡し方なども。

以上