ReactElement と ReactNode と React.FC と JSX.Element の違いがあやふや
created at: 2020-10-03
historyReact.FC
const Component: React.FC<Props> = ({ text }) => <h1>{text}</h1>
React.FunctionComponent の省略バージョンReact.FC<Props> のように props の型をジェネリックで指定できる返り値は
ReactElement<any, any> | nullchildren は最初から children?: ReactNode で定義されているので省略可でもオプショナルだし ReactNode は範囲が広すぎるので明示したほうが良さそう
ReactNode
const Component = ({ text }: Props): React.ReactNode => <h1>{text}</h1>
ReactChild | ReactFragment | ReactPortal | boolean | null | undefined色々な型を網羅している。受け入れ範囲が広い。
ReactChild
ReactElement | ReactTextReactText
string | numberReactFragment
{} | ReactNodeArrayReactNodeArray
Array<ReactNode>[1, 2, 'foo', 'bar'] みたいな配列が返る可能性もある。ReactPortal
ReactElement { key: string | number | null; children: ReactNode }ReactElement
const Component = ({ text }): React.ReactElement => <h1>{text}</h1>
まとめ
React.ReactElement使っとけば良さそう参考
参考というか本家の型