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

# 目次

# propsとは

[ここ](https://www.to-r.net/media/react-tutorial06/)とか[ここ]()とか[公式サイト](https://ja.reactjs.org/docs/components-and-props.html)によると

###### 親コンポーネントから子コンポーネントへ値を渡すための仕組み
とか
###### 親コンポーネントから渡されたプロパティ
という役割らしいです。

あんまり深く考えないでください。
<font color="red">引数みたいなやつ</font>
と感じ取ってください。
（考えるな。感じｒ）

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

<font color="red">propsは値だけでなく、function(イベント)やstyleなども入れて渡せます。</font>

ちなみに、<font color="red">読み取り専用</font>らしいです。
あんまり意識したこと無かったですが、そうらしいです。

# さっそくpropsを使ってみよう
[Part3](https://qiita.com/yokosuka205k9/items/b9725a744246594f28b8)で、Child1～3コンポーネントを作って親コンポーネントで使用し表示したかと思いますが、

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


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

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

又は

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

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

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

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

```typescript
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に他の要素も追加し親から子へ渡してみよう

親コンポーネント

```typescript
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;
```

子コンポーネント

```typescript
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をスプレッド構文を使用し簡単に書く

親コンポーネント

```typescript
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;
```

子コンポーネント

```typescript
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にイベントを追加し親から子へ渡してみよう

親コンポーネント

```typescript
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;
```

子コンポーネント

```typescript
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()


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

以上