【React】Propsの使い方

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

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

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

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

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

インストールが完了したら、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>
上記を削除すると、ブラウザは真っ白の状態になりますので、H1タグを加えて文字を表示させます。
次のような記述にします。
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;
この状態でブラウザを確認すると次のように表示されていると思います。
表示されていない場合は、記述のスペルに誤りがないか確認をしましょう。

まとめ

今回はReactのPropsの最もシンプルな使い方を書きました。
最後までお読みいただきありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください