ReactNodeとは
TypeScriptでReactを使用する際、子要素を扱う際の型の一つ。
ReactのJSX要素を扱うための型として定義されており、コンポーネント内で扱う要素の範囲を広げることが可能になります。その柔軟性から、React のコンポーネント設計において、子要素を扱う際の型としてよく利用される。
具体的には以下のような型定義となる。
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined
使う上での注意点
柔軟性が高すぎるが故、型チェックの意味が失われる可能性があります。
特定の型を期待する場合は厳密な型を使用するようにすると良い。
汎用的に使う子コンポーネントには便利だが、より意図を伝えるためには型定義を具体的にすると良い。
参考
React の ReactNode とは何か？
ReactNodeをわかりやすく解説
React.ReactNodeと記述者の意図