PUROGU LADESU

ポエムがメインのブログです。

React コンポーネント

コンポーネント

関数コンポーネントとクラスコンポーネントがある
hooksができたので関数コンポーネントがおすすめ

  • 関数コンポーネント
    returnでReact要素を返す
    propsを引数で受け取る

  • クラスコンポーネント
    Componentクラスを継承
    renderでReact要素を返す
    propsはthisでアクセス
    stateが使える
    ライフサイクルメソッドが使える

  • パラメータを渡す
    タグの属性値として指定する {}で数値や配列、オブジェクト、関数なども渡せる スプレッド構文...でオブジェクトを各属性に展開して渡せる

<Hello text="aaa" />
<Hello number={ 123 } />
<Hello { ...attrs } />
function MyHello(props) {
let word = props.text
<Hello>bbb</Hello>
  • 子要素を受け取る
let name = props.children  

文字列だけでなく、React要素でもOK