[React] propsの基本

前回は関数コンポーネントの基本的な書き方について記事を書いた。
https://qiita.com/QiitaD/items/5ba8adbde6ff01c914a7

今回はpropsについて記事にしようと思う。

propsとは

データの入ったプロパティという意味。個人的には引数みたいなものと認識している。
例えば関数コンポーネントにpropsとしてデータを渡すことで、そのデータを関数コンポーネント内で使うことができるし、データに応じた要素を返却できる。

コード

前回のButton.tsxファイルにpropsを設定してみる。propsとしてボタンに表示するテキストを指定できるようにしようと思う。

Button.tsx

import React from "react";

export default Button;

// propsを指定するときはinterfaceを使う。このブロック内にボタン表示テキストを定義しておく
interface ButtonProps {
  text: string;
}

//関数コンポーネントの引数としてButtonPropsを指定することで、呼び出し側でtext: stringを指定しなければならなくなる。（もちろん複数定義されていればその分渡す必要がある）
function Button(props: ButtonProps) {
  return <button>{props.text}</button>;
}

呼び出し側は、関数呼び出し時にButtonPropsに定義されている変数を渡すだけである。

import React from "react";
import { RecoilRoot } from "recoil";
import Button from "./Button";

function App() {
  return (
    <RecoilRoot>
      <div>
        //ここでtextにデータを渡す。
        <Button text="テストボタン"></Button>
      </div>
    </RecoilRoot>
  );
}

export default App;

表示結果

前回と同じ結果になる