【React】propsの使い方とと大事な2つのルール

2022年11月22日2022年11月24日React

Reactでpropsを使う方法と大事な2つのルールを紹介します。
propsを使うことで、似ているコンポーネントで少しだけ変化させたい要素がある場合でも
簡単にコンポーネントを使いまわしつつそれぞれに違いをもたせることができるようになります。

Reactのpropsは常に一方通行

Reactでpropsは常に親コンポーネントから子コンポーネントへ渡されるという一方通行の原則があります。

Reactのpropsは読み取り専用

Reactのpropsは読み取り専用です。つまり、書き換えはできません。

Reactでpropsを渡す方法(親)

import Child from "./components/Child";

// colorという属性名にorangeという属性値を追加
const Func = () => {
  return (
    <>
      <Child color="orange" />
      <Child color="blue" />
      <Child color="green" />
    </>
  );
};

export default Func;

上のように、子コンポーネントに任意の属性名と属性値を設定することで、それをオブジェクトとして渡すことができます。

Reactでpropsを使う方法(子)

const Child = (props) => {
  console.log(props); //{color: 'orange'}
  return (
    <div className={`component ${props.color}`}>
      <h3>Hello Component</h3>
    </div>
  );
};

export default Child;

子コンポーネントでは、引数にpropsとしてconsoleで出力すると、中身を確認することができます。
あとは、普通にJavaScriptのオブジェクトにアクセスするようにして使用することができます。

propsを分割代入を使って必要な要素だけ使用する(子)

const Child = ({color}) => {
  console.log(color); //{color: 'orange'}
  return (
    <div className={`component ${color}`}>
      <h3>Hello Component</h3>
    </div>
  );
};

export default Child;

上のように、引数部分で分割代入することで、propsを省略することができるため、
より簡潔な見た目でコードがスッキリするようにすることもできます。

分割代入でデフォルト値を設定する(子)

const Child = ({color = "black"}) => {
  console.log(color); //{color: 'orange'}
  return (
    <div className={`component ${color}`}>
      <h3>Hello Component</h3>
    </div>
  );
};

export default Child;

上のように引数内でデフォルト値を設定することができます。
親コンポーネントで特に何も属性値を渡さないときは、デフォルト値が適用されます。

関数内でのみ使用できる変数を指定する(子)

const Child = ({color:clr = "black"}) => {
  console.log(clr); //{color: 'orange'}
  return (
    <div className={`component ${clr}`}>
      <h3>Hello Component</h3>
    </div>
  );
};

export default Child;

上のようにすることで、関数内でのみ使用できる変数を指定できます。

いろんな型を渡す(親)

const Func = () => {
  // 関数
  const hi = (arg) => `Hi ${arg}.`;

  // オブジェクト
  const obj = {
    firstname: "goro",
    lastname: "yamada",
    age: 16,
  };

  return (
    <>


  );
};

いろんな型を使う(子)

const Child = ({ color: clr = "black", num, fn, bool, lastname, age }) => {
  console.log(clr); //{color: 'orange'}
  return (
    

Hello Component
{num}
{fn('山田さん')}
{bool? 'true': 'false'}
{lastname}: {age}

  );
};

特に注意点はないのですが、関数は内容によってはコンポーネントで使わないとエラーになるときがあります。