【React】propsを使って親コンポーネントから子コンポーネントに値などを渡す


今回は、Reactのprops機能についてみていきます。
コンポーネントを分割をすると値の受け渡しが必要になってきます。
例えば、
- 変数を自由に受け渡して、内容を変えたコンポーネントを作りたい
- 形だけ作ったボタンに値やonClickを渡したい
- ヘッダーとフッターを分割したい
などですね。
実際に作っていくと必ず覚えておきたい機能がpropsとなるので、ぜひ覚えてください。
単純に値だけの受け渡しだけではなく、関数やchildrenで挟んだ間をすべて渡せるのも良い点です。
- propsの基本的な使い方
- propsはデータだけではなく、オブジェクトや関数も渡せること
- childrenで間に挟んだすべてを渡せること
基本的な使い方

今回の構成については、簡単にしてあります。App.jsという親コンポーネントとSample.jsという子コンポーネントです。
親コンポーネント:App.js
子コンポーネント:Sample.js
App.js
まずは、親コンポーネントのApp.jsです。
インポートしたSampleで、
- 変数のname、age、phone、email、handleの値
- 関数のhandleClick
- Sampleに挟んだclickをchildren
を渡します。
import { Sample } from "./Sample";
export default function App() {
const handleClick = () => {
alert("click");
};
return (
<div className="App">
<Sample
name={"moo"}
age={"30"}
phone={"090-1234-5678"}
email={"exsample@foo.com"}
handleClick={handleClick}
>
click
</Sample>
</div>
);
}
Sample.js
こちらが、受け取る側の子コンポーネントです。
props.変数名で受け取れます。
buttonに関数を渡せば、関数が発動します。
またchildrenを使えば、挟んでいた値が帰るので、ボタンの名前も入りますね。
export const Sample = (props) => {
return (
<div>
<ul>
<li>名前:{props.name}</li>
<li>年齢:{props.age}</li>
<li>電話:{props.phone}</li>
<li>メール:{props.email}</li>
</ul>
<button onClick={props.handleClick}>{props.children}</button>
</div>
);
};

これが基本的な使い方だにゃ。というか、これが全てと言えるんだにゃ。あとは、別な機能との渡し方のアレンジみたいなものだから、気軽にみてほしいにゃ。
アレンジ編
分割代入
const {a, b, c} = props

propsには分割代入が使えます。これを使うことで毎回props.を書かずによくなります。
//App.jsの分割代入
export const Sample = (props) => {
const { children, name, age, phone, email, handleClick } = props;
return (
<div>
<ul>
<li>名前:{name}</li>
<li>年齢:{age}</li>
<li>電話:{phone}</li>
<li>メール:{email}</li>
</ul>
<button onClick={handleClick}>{children}</button>
</div>
);
};
オブジェクトの利用

これは、アレンジというかまあ、オブジェクトも渡せるんだにゃって感じだにゃ。
たくさん渡すものがある時は、上に説明したような感じではなくオブジェクトを使って渡しちゃったほうが楽なんだにゃ。なんとなくみておいてほしいんだにゃ。
//App.jsのオブジェクト利用
import { Sample } from "./Sample";
export default function App() {
//オブジェクトの設定
const user = {
name: "moo",
age: "30",
phone: "090-1234-5678",
email: "exsample@foo.com"
};
const handleClick = () => {
alert("click");
};
return (
<div className="App">
<Sample user={user} handleClick={handleClick}>
click
</Sample>
</div>
);
}
//Sample.jsのオブジェクト受け取り及び使用
export const Sample = (props) => {
const { children, user, handleClick } = props;
return (
<div>
<ul>
<li>名前:{user.name}</li>
<li>年齢:{user.age}</li>
<li>電話:{user.phone}</li>
<li>メール:{user.email}</li>
</ul>
<button onClick={handleClick}>{children}</button>
</div>
);
};
プログラミングを学ぶならTechAcademy(テックアカデミー)がおすすめ!

独学で苦戦している人は、一度しっかりと基礎を学ぶと次のステップへ進めますよ。今のおすすめは、TechAcademy(テックアカデミー)ですね。
- オンラインで選抜された現役エンジニアから学ぶことができる
- 自宅からWeb制作・プログラミング・アプリ開発など幅広い分野を学べる
- 学ぶだけではなく、転職の支援、副業に活かせるスキルの習得、副業の仕事紹介まで行っている

無料体験や相談もあるから、一度試してみてもいいんだにゃ!
\無料体験、無料相談はこちらから/