はじめに

React の Props にデフォルト値を使いたい場合の書き方．

元のコード

NameViewというコンポーネントにnameという Props を与えたいとする．

import React from 'react';

interface NameProps {
  name: string;
}

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

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

export default App;

方法

デフォルト値を使う

interfaceやtypeを使い，デフォルト値を使いたい場合は，Props を渡さない場合の動作をさせるため，?を付けることで Props を任意にする．

import React from 'react';

interface NameProps {
  name?: string;
}

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

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

export default App;

使用時にエルビス演算子

使用時にエルビス演算子を使うという方法もある．

import React from 'react';

interface NameProps {
  name?: string;
}

const NameView = ({ name }: NameProps): JSX.Element => {
-  return <div>name: {name}</div>;
+  return <div>name: {name || 'anonymous'}</div>;
};

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

export default App;

コンポーネントの最初にエルビス演算子

import React from 'react';

interface NameProps {
  name?: string;
}

- const NameView = ({ name }: NameProps): JSX.Element => {
+ const NameView = (props: NameProps): JSX.Element => {
+  const name = props.name || 'anonymous';
  return <div>name: {name}</div>;
};

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

export default App;

おわりに

コードをキレイにするためにはデフォルト値を使ったほうが良いが，開発の段階ではエルビス演算子を使うのが便利だなと思った．

参考