最終更新:2022-08-04 (木) 18:31:28 (4d)  

React/props
Top / React / props

https://ja.reactjs.org/docs/components-and-props.html

動作

  • React がユーザ定義のコンポーネントを見つけた場合、JSXに書かれている属性と子要素を単一のオブジェクトとしてこのコンポーネントに渡します。このオブジェクトのことを “props” と呼びます。

Props は読み取り専用

  • コンポーネントを関数で宣言するかクラスで宣言するかに関わらず、自分自身の props は決して変更してはいけません。

渡す方

渡される方

React/関数コンポーネントの場合:

  • コンポーネントの引数(例:props)

React/クラスコンポーネントの場合

  • コンストラクタの引数のpropsが規定す楽のコンストラクタでthis.propsに代入される
  • コンストラクタ内で使う場合、下記が必要
    • constructor(props)
      • super(props)
      • //this.propsでアクセス可能
  • コンストラクタを指定しない場合

渡されるもの

React/props/関数

  • 関数も渡せる
    • onClickReset?={onClickReset?}

親クラスの処理

  • super(props)

this.props

TypeScript

  • 型指定も可能
    export const LiteItem = (props: User) => {}