TypeScriptでコンポーネントにPropsで文字列を渡す方法（Props）

目次

事前準備

以下のようなボタンコンポーネントを準備します。

const Button = () => {
  return (
    <button>
      ボタン表示タイトル
    </button>
  );
};

export default Button;

このコンポーネントは以下の様に呼び出します。

<Button />

このボタンコンポーネントの「ボタン表示タイトル」を受け渡したPropsの値を表示する様に修正します。

Propsで文字列を渡す方法

ボタンコンポーネントを以下の様に修正します。

const Button = ({
  title,
}: Props) => {
  return (
    <button>
      {title}
    </button>
  );
};

type Props = {
  title: string;
};

export default Button;

以下の様に呼び出すことで、タイトルを渡し、Propsで渡ってきた値を使用する事ができます。

<Button title="ボタン" />

初期値を設定する方法

以下の様に「title = "初期値"」と記載することで、初期値を設定する事ができます。

const Button = ({
  title = "初期値",
}: Props) => {
  return (
    <button>
      {title}
    </button>
  );
};

type Props = {
  title: string;
};

export default Button;

以下の様に呼び出すことで、Propsではなく、初期値が使用されます。

<Button />