• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React/コンポーネント

React/props

Top / React / props

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

動作

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

Props は読み取り専用

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

厳格なルール

• 全てのReactコンポーネント?は自己のpropsに対して純関数(純粋関数)のように振る舞わねばならない

渡す方

• JSXの属性

渡される方

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

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

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

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

渡されるもの

• その要素の属性	this.props
  子要素	this.props.children

React/props/関数

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

親クラスの処理

• super(props)

this.props

• React/クラスコンポーネントに渡されたprops

TypeScript

• 型指定も可能

  export const LiteItem = (props: User) => {}

propsでは渡されない

• React/key
• React/ref