ReactコンポーネントでTypeScriptを使ってデフォルトプロパティ値を設定する方法

TypeScriptでReactコンポーネントのデフォルトプロパティ値を設定する方法

インターフェースを使用する

コンポーネントのプロパティをインターフェースで定義し、デフォルト値を設定できます。

interface MyComponentProps {
  title?: string; // デフォルト値は "Hello, world!"
  count: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, count }) => {
  return (
    <div>
      <h1>{title || "Hello, world!"}</h1>
      <p>カウント: {count}</p>
    </div>
  );
};

上記の場合、titleプロパティは省略可能で、デフォルト値は "Hello, world!" です。countプロパティは必須です。

デフォルト値演算子を使用する

デフォルト値演算子 (??) を使用して、プロパティが存在しない場合のみデフォルト値を設定できます。

const MyComponent: React.FC<{ title?: string, count: number }> = ({ title, count }) => {
  return (
    <div>
      <h1>{title ?? "Hello, world!"}</h1>
      <p>カウント: {count}</p>
    </div>
  );
};

上記の場合、titleプロパティが存在しない場合のみ、デフォルト値 "Hello, world!" が設定されます。

関数を使用する

デフォルト値を返す関数を使用できます。

const MyComponent: React.FC<{ title?: string, count: number }> = ({ title, count }) => {
  const defaultTitle = () => {
    const now = new Date();
    return `現在の時刻: ${now.toLocaleTimeString()}`;
  };

  return (
    <div>
      <h1>{title ?? defaultTitle()}</h1>
      <p>カウント: {count}</p>
    </div>
  );
};

上記の場合、titleプロパティが存在しない場合、現在の時刻を返す関数 defaultTitle の結果がデフォルト値として設定されます。

interface MyComponentProps {
  title?: string; // デフォルト値は "Hello, world!"
  count: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ title, count }) => {
  return (
    <div>
      <h1>{title || "Hello, world!"}</h1>
      <p>カウント: {count}</p>
    </div>
  );
};

export default MyComponent;

const MyComponent: React.FC<{ title?: string, count: number }> = ({ title, count }) => {
  return (
    <div>
      <h1>{title ?? "Hello, world!"}</h1>
      <p>カウント: {count}</p>
    </div>
  );
};

export default MyComponent;

const MyComponent: React.FC<{ title?: string, count: number }> = ({ title, count }) => {
  const defaultTitle = () => {
    const now = new Date();
    return `現在の時刻: ${now.toLocaleTimeString()}`;
  };

  return (
    <div>
      <h1>{title ?? defaultTitle()}</h1>
      <p>カウント: {count}</p>
    </div>
  );
};

export default MyComponent;

クラスコンポーネントを使用する

クラスコンポーネントを使用する場合、defaultProps プロパティを使用してデフォルトプロパティ値を設定できます。

class MyComponent extends React.Component<{ title?: string, count: number }> {
  static defaultProps = {
    title: "Hello, world!"
  };

  render() {
    const { title, count } = this.props;
    return (
      <div>
        <h1>{title}</h1>
        <p>カウント: {count}</p>
      </div>
    );
  }
}

export default MyComponent;

フックを使用する

useState フックを使用して、デフォルト値を持つ状態変数を定義できます。

const MyComponent: React.FC = () => {
  const [title, setTitle] = useState("Hello, world!");
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>{title}</h1>
      <p>カウント: {count}</p>
      <button onClick={() => setTitle("新しいタイトル")}>タイトルを変更</button>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
    </div>
  );
};

export default MyComponent;

コンポーネントの引数としてデフォルト値を渡す

コンポーネントを使用する際に、引数としてデフォルト値を渡すことができます。

const MyComponent = ({ title = "Hello, world!", count }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>カウント: {count}</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent count={10} />
      <MyComponent title="新しいタイトル" count={20} />
    </div>
  );
};

export default App;