React 18以降はFCはchildrenを暗黙的に型に含めない

はじめに

TypeScript 学習中にFCを使って関数に型定義をしたが、childrenを渡した時にエラーとなった。

原因

React.FC は children を暗黙的に持つ挙動だと思っていたがReact 18以降は children をもたなくなったみたい。

    <Text color="pink" fontSize="18px">
        暗黙的に渡さないよ
    </Text>

import type { FC } from "react";

type Props = {
  color: string;
  fontSize: string;
};

export const Text: FC<Props> = (props) => {
  const { color, fontSize } = props;
  return <p style={{ color, fontSize }}>テキストです</p>;
};

解決

children は明示するして解決。

import type { FC, ReactNode } from "react";

type Props = {
  color: string;
  fontSize: string;
  children?: ReactNode;
};

export const Text: FC<Props> = (props) => {
  const { color, fontSize, children } = props;
  return <p style={{ color, fontSize }}>{children}</p>;
};

参考

ありがとうございます。