React.ComponentProps 型を積極的に使おう

Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=

[akatakun]

React.ComponentPropsWithoutRef, React. ComponentPropsWithRefで従来のHTMLタグが取りうる属性のPropsを楽に定義する, typeofと併用することでComponentに対しても適応できる

[carolina04]

“type Props = React.ComponentProps<'input'> // <- here export const Input = ({ value, onChange, onBlur, onFocus }: Props) => ( <input”

[shingo-sasaki-0529]

あるコンポーネントの子要素に対する props を間接的に渡せるようにする型の付け方。意外と初めて役立った。

[jay-es]

例えば input タグにスタイルを適用しただけのコンポーネントの場合、props の型定義は自作せずに `React.ComponentProps<'input'>` を使う

[efcl]

コンポーネントからpropsの型を取り出すReact.ComponentProps

[nismit]

こういうの全然知らないからスーパー助かるが、逆にどうやって見つけてるんだろうか

[hasiduki]

ふーむ！

[Phenomenon]

あーいいですね