書き方
渡し方(属性部分)
- 基本的に
{ }
で囲って渡す。JavaScriptの式も渡せる。(if文やforループは渡せない) - 文字列は、
{ }
無しで、" "
又は' '
で囲うだけでOK。ただし` `
は{ }
が必要。 - ブーリアンはtrueの場合だけ
={true}
を省略できる。省略しなくても良い。 - オブジェクトとして書かれたものを、
<Hoge {...piyo} />
のように、スプレッド構文を使ってpropsとして渡せる。
読み出し方(仮引数部分)
({ hoge, piyo })
のように書く。分割代入構文。({ fuga, size = 100 })
のようにデフォルト値を指定できる。(props)
とだけ書く方法もある。使用部でprops.hoge
やprops.fuga
のように書く。
特殊なprops(children)
- 概要:入れ子になったコンポーネントで、外側(親)のコンポーネントから見て「JSXタグで挟んだ内側(子)全体」が、childrenという特別なpropsになっている
- 書き方:親コンポーネントの、仮引数部に
({ children })
と書き、表示部に<div> {children} </div>
のように書く - 使い所:パネルやグリッドのように視覚的に子コンポーネントを囲む場合や、コンテクストのように下位コンポーネントに値を渡す場合 (【React】コンテクスト)