【React】Propsの使い方

Reactには、コンポーネントという概念があり、親コンポーネントから子コンポーネントへ値を渡すことができます。

親コンポーネントから子コンポーネントへ値を渡す時に、使用するのが、Propsという概念です。
シンプルな利用方法を見ていきましょう。

まず始めに、親コンポーネントとなるファイルと子コンポーネントとなるファイルをつくります。
その後にプログラムを記述して、Propsを利用したいと思います。

初学者が一番理解しやすい形を目指して、できるだけ余計なものを省いたプログラムにしたいと思います。

Reactをまだインストールしていない方は、こちらを参考にインストールください。

インストールが完了したら、Reactを起動します。
ブラウザには次のように表示されます。

この画面に表示されている内容は、App.jsの中で定義されています。

ご使用されているエディターによって、下記の表示は異なりますが、srcディレクトリの中に、App.jsというファイルがありますので、中身を見てみましょう。
中身を見ると初学者の方にとっては、ちんぷんかんぷんな内容だと思います。
必要のない記述を削除しましょう。

余分な部分を削除

下記の記述を削除します。

ロゴや表示しているデフォルトの文字は、使用しないので削除します。

import logo from './logo.svg';

<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>

import './App.css';


function App() {
return (
<div className="App">
<h1>余計なものを削除した後</h1>
</div>
);
}


export default App;

そうすると、ブラウザには次のように表示されます。

これで余分な記述を削除し終えました。それでは親コンポーネントと子コンポーネントとなるファイルを作成しましょう。

ファイルの作成

親コンポーネントのファイル名は任意のファイル名で結構です。今回はわかりやすいように、ParentComp.jsという名前のファイルにします。

ParentComp.jsファイルには、次を記述しましょう。

import React from 'react'


const ParentComp = () => {
return (
<div>
<h1>親コンポーネントです</h1>
</div>
)
}


export default ParentComp

子コンポーネントのファイル名も任意のファイル名で結構です。今回はわかりやすいように、ChildComp.jsという名前のファイルにします。

ChildComp.jsファイルには、次を記述しましょう。

import React from 'react'


const ChildComp = () => {
return (
<div>
<h1>子コンポーネントです</h1>
</div>
)
}


export default ChildComp

ここまでで親コンポーネントにするParentComp.jsファイルと子コンポーネントChildComp.jsファイルを作成しました。

親コンポーネント

ここからがPropsの本題です。
Propsは、親コンポーネントから子コンポーネントへ値を渡したい時に、使用します。

まず始めに、親コンポーネントのファイルで、子コンポーネントを利用できるようにインポートします。次に子コンポーネントへ渡す値を親コンポーネントに記述します。

ParentComp.jsファイルに次を記述して、nameとnumberを定義します。

nameには、Johnという文字列、numberには、100を定義します。

import React from 'react'
import ChildComp from './ChildComp'


const ParentComp = () => {
return (
<div>
<h1>親コンポーネントです</h1>
<ChildComp name="John" number={100}/>
</div>
)
}


export default ParentComp

Propsを受け取る

次に子コンポーネントで、Propsを受け取る記述を書きます。
Propsを受け取るには、引数にpropsを明記します。

propsで受け取った値を利用するには、一番わかりやすい書き方では、props.値（ドット）と記述します。今回、親コンポーネントは、nameという名前、またnumberという名前を定義していますので、子コンポーネントでは、props.nameまたprops.numberと記述します。

import React from 'react'


const ChildComp = (props) => {
return (
<div>
<h1>子コンポーネントです</h1>
<h2>名前：{props.name}</h2>
<h2>番号：{props.number}</h2>
</div>
)
}


export default ChildComp

ブラウザに表示させる

最後にこの親コンポーネントの内容をブラウザに表示させるために、App.jsファイルの記述に<ParentComp />を書き加えましょう。
インポートすることを忘れないでください。

import './App.css';
import ParentComp from './ParentComp';


function App() {
return (
<div className="App">
<h1>余計なものを削除した後</h1>
<ParentComp />
</div>
);
}


export default App;

まとめ