【React × TypeScript】childrenとonClickイベントがある場合のButtonのComponent化

2023.01.02

ReactのComponent化は習得した、childrenの使い方もわかった、onClickイベントの使い方もTypeSciptもある程度わかるようになった。

がしかし！onClickイベントを含んだButtonのComponent化はどうすればよいのでしょう？説明します。

キャンセルボタンを作る例で見ていきましょう！

Componentを使う側

import Button from './Button';

const App = () => {

  const handleClick = () => {
    console.log('Clicked!');
    // ここにclick時に実行したい処理を記述
  };

  return (
    <div>
      <Button onClick={handleClick}>キャンセル</Button>
    </div>
  );
};

export default App;

Buttonという名前のComponentに、onClickイベントと「キャンセル」というchildrenを持っています。

Component側

Componentを作っていきましょう！

import { ReactNode } from "react";

interface Props {
  children: ReactNode;
  onClick: () => void;
}

const Button = ({ children, onClick }: Props) => {
  return (
    <button
      type="button"
      onClick={onClick}
    >
      {children}
    </button>
  );
};

export default Button;

  • interfaceはオブジェクト型の型宣言をするものです。typeでも代用可能です。
  • onClickの型は、引数も返り値も無いので、() => void となります。
    これは以下のように書くことも可能です。
onClick: VoidFunction;

以上になります！お読みいただきありがとうございました。

コメント