286 文字
1 分
React Function Componentの型について何を使うべきか
React の Function Component の型は、歴史的な理由などにより様々な記述ができる。
- React.FunctionComponent
- React.FC
- FunctionComponent のエイリアス
- React.VFC
- 以前は React.FC の children を持たないバージョンだったが現在は同じ
- 上の変更に伴い非推奨へ
- ….
- (props: SomeComponentProps): JSX.Element
React.FC はおすすめできない
同様の記述ができる。
interface SomeComponentProps { value?: string;}
const SomeComponent: React.FC<SomeComponentProps> = (props) => { return <div>Some Component</div>;};
const SomeComponent = (props: SomeComponentProps): JSX.Element => { return <div>Some Component</div>;};React.FC では props にジェネリクスを渡すのが難しい。
const SomeComponent: React.FC<SomeComponentProps> = (props) => { return <div>Some Component</div>;};Props への型付けでは、通常の関数と同様の手段が利用できる。
const checkValidity = <T extends string>(value: T): boolean => { return true;};
const SomeComponent = <T extends Record<string, number>>( props: SomeComponentProps<T>) => { return <div>Some Component</div>;};以前は React.FC の場合、誤って children が混入してしまう問題もあった。
JSX ファイルでジェネリクスを使う場合は注意
TSX ファイルでジェネリクスを使う場合、ジェネリクスが JSX として誤認識される場合がある。
export const SomeComponent = <T>(props: SomeComponentProps<T>) => { return <div>{`${props.value}`}</div>}ワークアラウンドとして次のような記述がある。
export const SomeComponent = <T,>(props: SomeComponentProps<T>) => { return <div>{`${props.value}`}</div>;}; React Function Componentの型について何を使うべきか
https://blog.ohirunewani.com/posts/react-function-component-type/