TypeScriptでコンポーネントにPropsで関数を渡す方法（Props）

目次

事前準備

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

const Button = () => {
  return (
    <button onClick={() => {console.log('ボタン押下')}}>
      ボタン
    </button>
  );
};

export default Button;

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

<Button />

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

Propsで文字列を渡す方法

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

const Button = ({
  clickAct,
}: Props) => {
  return (
    <button onClick={clickAct}>
      ボタン
    </button>
  );
};

type Props = {
  clickAct: () => void;
};

export default Button;

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

<Button clickAct={() => {console.log('ボタン押下')}} />

初期値を設定する方法

以下の様に「clickAct = () => {}」と記載することで、初期値を設定する事ができます。

const Button = ({
  clickAct = () => {console.log('ボタン押下')},
}: Props) => {
  return (
    <button onClick={clickAct}>
      ボタン
    </button>
  );
};

type Props = {
  clickAct?: () => void;
};

export default Button;

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

<Button />