zukucode
主にWEB関連の情報を技術メモとして発信しています。
React

React 関数コンポーネントにプロパティを設定する

React+TypeScriptで作成した関数コンポーネントにプロパティを設定する方法を紹介します。

以下は送信ボタンのコンポーネントを作成しています。

isSubmittingというプロパティを用意して、値がtrueの場合はボタンを非活性にする制御を入れています。

SubmitButton.tsx
import { VFC } from 'react';

type Props = {
  isSubmitting?: boolean;
};

const SubmitButton: VFC<Props> = ({ isSubmitting }) => {
  return (
    <button disabled={isSubmitting}>
      送信
    </button>
  );
};

export default SubmitButton;

VFC<プロパティの型>の形式で定義するとプロパティを受け取れるようになります。

以下のような形でも可能ですが、上記のように使用するプロパティを{ プロパティ }の形で受け取る方法（分割代入）がネット上のサンプルでも多いです。

const SubmitButton: VFC<Props> = (props) => {
  return (
    <button disabled={props.isSubmitting}>
      送信
    </button>
  );
};

定義したプロパティは以下のように指定できます。

使う側
import SubmitButton from './SubmitButton';

<SubmitButton isSubmitting={isSubmitting} />
React

関連記事