2023.01.16 2023.01.31

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

momeq

モー

今回は、Reactのprops機能についてみていきます。

コンポーネントを分割をすると値の受け渡しが必要になってきます。

例えば、

変数を自由に受け渡して、内容を変えたコンポーネントを作りたい
形だけ作ったボタンに値やonClickを渡したい
ヘッダーとフッターを分割したい

などですね。

実際に作っていくと必ず覚えておきたい機能がpropsとなるので、ぜひ覚えてください。

単純に値だけの受け渡しだけではなく、関数やchildrenで挟んだ間をすべて渡せるのも良い点です。

この記事で学べること

propsの基本的な使い方
propsはデータだけではなく、オブジェクトや関数も渡せること
childrenで間に挟んだすべてを渡せること

Contents

基本的な使い方
- App.js
- Sample.js
アレンジ編
- 分割代入
- オブジェクトの利用
プログラミングを学ぶならTechAcademy（テックアカデミー）がおすすめ！

基本的な使い方

モー

今回の構成については、簡単にしてあります。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>
  );
};