【React】props具体例と共に解説

propsとは？
propsの具体的な使い方
- 親コンポーネント（子に渡す値を設定）
- 子コンポーネント（親から渡された値を受け取る準備）

propsとは？

propsとは一言で言うと親コンポーネントから子コンポーネントへ値を渡すための仕組みです。

コンポーネントとして画面の要素を切り出しても、web開発をしているとコンポーネントの振る舞いが変わってたりします。このページでは赤文字にしたい！タイトルを変えたい！！などなど、、、。

そのため、ある程度動的にコンポーネントを管理するためにpropsで様々な条件を渡したりします。propsはコンポーネントに渡される引数的なもの、というイメージに近いです。

propsの具体的な使い方

今回は下の「りんご」と「みかん」を文字色と文字をpropsを使って出し分けたいと思います。

親コンポーネントの「App.js」から、子コンポーネント「Furuit.jsx」へpropsを渡したいと思います。

親コンポーネント：子コンポーネント呼び出し時に、子に渡したい値を設定する

子コンポーネント：親から値をもらいたいところにpropsを定義する

親コンポーネント（子に渡す値を設定）

import React from "react";
import { Fruit } from "./components/Furuit";
import "./styles.css";

export default function App() {
  return (
    <>
      //子に渡す値を設定 
      <Fruit color="red" message="りんご" />
      <Fruit color="orange" message="みかん" />
    </>
  );
};

このようにコンポーネントに対して任意の名前をつけて（colorとmessage）、イコールで要素を設定することで、子コンポーネントにpropsを渡せるようになります。

子コンポーネント（親から渡された値を受け取る準備）

export const Fruit = (props) => { 

  const fruitStyle = {
    color: props.color //親から渡された値を取り出す
  };

  return (
    <div className="App">
      <h1 style={fruitStyle}>{props.message}</h1>　//親から渡された値を取り出す
    </div>
  );
};