はじめに

React (+TypeScript)を使っていて，Props にデフォルト値を持たせたいことがあると思う．

そんな時の例を以前紹介した．

今回，それの発展（？）で，関数に対するデフォルト値について記す．

元のコード

NameViewというコンポーネントに与えているhandleClick()という Props を任意にしたいとする．

import React from 'react';

interface NameProps {
  name: string;
	handleClick: () => void;
}

const NameView = ({ name, handleClick }: NameProps): JSX.Element => {
  return <div onClick={handleClick}>name: {name}</div>;
};

const App = () => {
  const handleClick = () => {
    alert('clicked');
  };

  return (
    <>
      <NameView name="hoge" handleClick={handleClick} />
    </>
  );
};

export default App;

方法

?によって Props を任意にし，コンポーネント内でデフォルトを記述できる．

 import React from 'react';

 interface NameProps {
   name: string;
-  handleClick: () => void;
+  handleClick?: () => void;
}

- const NameView = ({ name, handleClick }: NameProps): JSX.Element => {
+ const NameView = ({ name, handleClick = () => {} }: NameProps): JSX.Element => {
   return <div onClick={handleClick}>name: {name}</div>;
 };

 const App = () => {
   const handleClick = () => {
     alert('clicked');
   };

   return (
     <>
       <NameView name="hoge" handleClick={handleClick} />
+      <NameView name="hoge" />
     </>
   );
 };

 export default App;

今回は空の関数にしたが，コンポーネント毎にデフォルトで決めた処理を入れる場合でも，コンポーネント呼び出し時に挙動を好みに設定できるようなコンポーネントが実現できそうだ．

デフォルト値においては，扱う内容によってエルビス演算子を用いることも視野に入ると思ったが，関数では理解が複雑になるためあまり使わないと思う．

また，記述量の問題で，コンポーネントの Props 内で直接関数を記述する例にしたが，デフォルト関数が複数行をまたがる場合はコンポーネントの上でconst defaultHandleClick = () => {...}のようにし，それを与えるほうが簡潔と言えよう．

おわりに

図らずもバッドプラクティスになってしまっていたらごめんなさい．

参考