React | propsの使い方

React入門 - 5. propsの使い方

5. propsの使い方

これまでの学習で、関数コンポーネントを定義して画面に "Hello World!" と出力することができました。次はコンポーネント間でのデータの受け渡しについて確認していこうと思います。以前に作成したReactアプリケーションでは App コンポーネントの中で Hello コンポーネントを定義しています。src フォルダの App.js を確認してみましょう。

import logo from './logo.svg';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <Hello />
  );
}

export default App;

ここでは Hello コンポーネントの利用時にデータを受け渡すことができるようにプログラムを修正します。具体的には次のように Hello コンポーネントを利用することを目指します。

    <Hello name="React" />

上記のコードを見るとJSXによる <Hello> コンポーネントの定義に name="React" が追記されています。Reactのコンポーネントはこのような属性値やあるいは子要素の指定を props と呼ばれる仕組みを使って実現できるようになっています。

props とはコンポーネントのプロパティを意味します

Hello.js に props を追加する

それでは props を使ってデータを受け取ることができるように Hello.js を修正してみましょう。

function Hello(props) {
    return (
        <h1>Hello {props.name}!</h1>
    )
}
export default Hello;

修正箇所は2箇所あります。まず1つ目は Hello 関数に引数 props が追加されています。

function Hello(props) {
    // ...省略
}

Reactの関数コンポーネントはこのように引数で props を受け取ることができます。

それから修正箇所の2つ目を見てみましょう。Hello 関数の内部を見ると <h1> タグによる出力部分において props を参照するように修正しています。

        <h1>Hello {props.name}!</h1>

JSXでは変数の値を動的に出力する際には {} を使います。ここでは引数で受け取った props の name プロパティを出力しています。つまり <Hello name="React" /> コンポーネントの name 属性の値（ React ）を出力することになります。このように関数コンポーネントは引数 props を経由してコンポーネントのプロパティ（属性値）にアクセスできます。

App.js の修正

さいごに props を受け取るように修正した Hello コンポーネントに合わせて、親コンポーネントである App.js も修正しておきましょう。

import logo from './logo.svg';
import './App.css';
import Hello from './Hello';

function App() {
  return (
    <Hello name="React" />
  );
}

ここでは <Hello name="React" /> と修正しています。さきほど修正した Hello コンポーネントに対して name プロパティに "React" と指定しています。

動作確認

それではブラウザからアクセスして動作を確認しておきましょう。 npm start によって開発サーバを起動した状態で、ブラウザを開いて http://localhost:3000 にアクセスすると次のような結果を確認できるでしょう。

上記のように <Hello name="React" /> コンポーネントによる出力結果である Hello React! というメッセージを確認できます。Reactアプリケーションの開発では、コンポーネント間のデータの受け渡しに props を使います。注意点としては props によるデータの受け渡しは常に一方向です。親コンポーネントから子コンポーネントへとデータを渡すように実装します。

ここでは props を使ったコンポーネント間のデータの受け渡しについて学習しました。次はコンポーネントにおいてstate（状態）を管理する方法について学習します。