React propsの使い方

Reactにおけるpropsとは？

Reactにおけるpropsとは、関数コンポーネントで受け取る引数の様なものです。
他言語で言うとfunctionやメソッドに渡す引数のことです。
ここでは、propsの使い方について解説していきます。

※React入門はこちらからどうぞ

※こちらはUdemy
での学習メモです。

React propsの使用例

以下に簡単な例を記載します。

import React, { Component } from 'react';

class App extends Component{
  render(){
    return (
      // ②コンポーネント関数の呼び出し
      <Component_test props1={"This is props1"} />
    )
  }
}

// ①propsを使用するコンポーネント関数の定義
const Component_test = (props) => {
        return <div>{props.props1}</div>;
}
export default App;

コンポーネント関数の定義と、propsの使用

// ①propsを使用するコンポーネント関数の定義
const Component_test = (val) => {
        return <div>{val.props1}</div>
}

「Component_test」という関数を定義して、valの中のprops1という変数の中身を表示してます。このprops1のことをpropsと呼ぶみたいです。

上記、コンポーネントの呼び出しと、propsの定義箇所

      // ②コンポーネント関数の呼び出し
      <Component_test props1={"This is props1"} />

作成したComponent_testを呼び出しつつ、props1に「This is props1」という文字列を定義してます。

ブラウザでの表示確認（以下のコマンドを実行）

% yarn start

画面に「This is props1」が表示されました。

React propsのデフォルト定義

propsには、値が設定されなかった場合のデフォルト値が設定できます。

import React, { Component } from 'react';

// 関数コンポーネントにしてあります。
const App = () => {
  // propsとして渡す値を連想配列で定義
  // ３番目はdetailという値がありません。
  const testArr = [
     {title: "name1", detail: "detail1"},
     {title: "name2", detail: "detail2"},
     {title: "name3"}
  ]

    return (
         testArr.map((val) => {
           // Component_test()を呼び出して画面に配列の内容を表示
           return <Component_test props1={val.title} props2={val.detail}/>
         })
    )
const Component_test = (val) => {
        return <div>{val.props1}, {val.props2}</div>
}
// デフォルトの定義です。props2がない場合は"defaultと表示する。
Component_test.defaultProps = {
  props2: "default"
}

以下のコマンドを実行して画面表示確認

% yarn start

３行目の２番目の引数の値が設定したデフォルト値になっていることがわかります。

サンプル中に使用されているmap()関数の説明はこちらを参考にされてください。