【React】コンポーネントの引数の書き方を総まとめ！

2022年6月5日2022年7月4日

コンポーネントで引数を使う方法を教えて！

コンポーネントの引数は書き方がいくつかあるよ。
それぞれ詳しく解説していくね！

コンポーネントの準備

コンポーネントとは表示する内容の部品のことだよ！

親コンポーネントと子コンポーネントを例に引数の書き方を説明します。

TypeScriptを使った例も合わせて説明していきます。

import { Child } from '.../Child.〇〇';

const Parent = () => {
  return(
    <div>
      <h1>親コンポーネント</h1>
      <Child /> {/* 子コンポーネントの呼び出し */} 
    </div>
  );
};

const Child = () => {
  return(
    <div>
      <h1>子コンポーネント</h1>
    </div>
  );
};

引数の書き方

一般的な記述

まずは一番シンプルな方法を解説するね！

親コンポーネント呼び出しの中でkey="value"と引数を記述します。

const Parent = () => {
  return(
    <div>
      ...
      <Child title="子のタイトル"  /> {/* 子コンポーネントの呼び出し */} 
    </div>
  );
};

子コンポーネントで受け取る引数名を「props」とします。（引数名は自由に設定できます。）

propsはobject型で受け取るので、メソッドチェインをして渡された引数「title」の値を指定して表示させます。

const Child = (props) => {
  return(
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

const Child = (props: any) => {
  return(
    <div>
      <h1>{props.title}</h1>
    </div>
  );
};

関数で引数を渡すような感じと一緒だね！

分割代入で記述

次はもう少し簡潔に書ける方法を解説するね！

もっと簡潔に記述するには分割代入をします。

const Parent = () => {
  return(
    <div>
      ...
      <Child title="子のタイトル"  /> {/* 子コンポーネントの呼び出し */} 
    </div>
  );
};

{}の中に引数名を記述することで、渡された引数を受け取ることができます。

const Child = ({ title }) => {
  return(
    <div>
      <h1>{title}</h1>
    </div>
  );
};

const Child = ({ title }: string) => {
  return(
    <div>
      <h1>{title}</h1>
    </div>
  );
};

さっきより引数の見通しがよくなった！

複数の引数を分割代入で記述

複数の引数を扱う方法を解説するね！

複数の引数を渡したいときは、受け取る子コンポーネントでも複数受け取るように記述します。

TypeScriptは記述に少し注意が必要です。

const Parent = () => {
  return(
    <div>
      ...
      <Child title="子のタイトル" name="タロウ" age=10 /> {/* 子コンポーネントの呼び出し */} 
    </div>
  );
};

const Child = ({ title, name, age }) => {
  return(
    <div>
      <h1>{title}</h1>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  );
};

TypeScriptでは受け取る引数の型をそれぞれに指定できないのでany型にしかできません。

const Child = ({ title, name, age }: any) => {
  return(
    <div>
      <h1>{title}</h1>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  );
};

propsというobjectに型を指定することで、それぞれの引数に型を指定できます。

const Child = (props: { title: string, name: string, age: number }) => {
  return(
    <div>
      <h1>{props.title}</h1>
      <p>{props.name}</p>
      <p>{props.age}</p>
    </div>
  );
};

子コンポーネントで初期値を指定する方法

引数に初期値を指定する方法を解説するね！

子コンポーネントで初期値を設定する方法です。

親コンポーネントで引数を省略することができ、指定しなければこちらの初期値が優先されます。

const Parent = () => {
  return(
    <div>
      ...
      <Child name="タロウ" age=10 /> {/* 子コンポーネントの呼び出し */} 
    </div>
  );
};

const Child = ({ title = 'タイトル', name = '名前', age = 0 }) => {
  return(
    <div>
      <h1>{title}</h1>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  );
};

const Child = ({ title = 'タイトル' as string, name = '名前' as string, age = 0 as number }) => {
  return(
    <div>
      <h1>{title}</h1>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  );
};

初期値の指定も関数のときと似ているね！

親コンポーネントと子コンポーネントでの引数の受け渡しについて解説をしました。

TypeScriptでは少し記述に注意する部分があるので、その点に気をつけながら記述しましょう。

よかったらシェアしてね！