コンポーネントとPropsにも「徹底的な透明性」が求められる

コンポーネントと、そのPropsの名称・シグネチャについても、同様の原則が成り立つ。「カプセル化」「隠蔽」のような原則に縛られずに中身をあけすけに公開したほうが良い場合もある。

1. 特に「input をラップしたもの」「ボタン」のようなもの

生のinput, button, a要素の属性と同じ感覚で、Propsを通じて操作できるのが望ましい。

a11y 用の属性を潰してしまうと生のDOM要素よりも劣化してしまう

利用側で、手動で具体的に指定する場合

Radix UI 等のライブラリは、子にそのような属性を自動で付与する

2. ほかにも親からコントロールしたいコンポーネント全般

ありきたりな名前を付けることで「名前だけで挙動が一目瞭然」となる。これはかなり嬉しい。

たとえばダイアログ・アコーディオンの開閉であれば open / onOpenChange / defaultOpen のように

これは、ブラウザ組み込みの<input>と同じパターン

open / onOpenChange は Controlled Component 制御コンポーネント

defaultOpen は Uncontrolled Component 非制御コンポーネント

code:tsx

import { type ComponentPropsWithoutRef, forwardRef } from "react";

type Props = ComponentPropsWithoutRef<"input">;

export const MyFancyInput = forwardRef<HTMLInputElement, Props>(

(props, forwardedRef) => {

// これだと何もしてない。あとは css とか周りの装飾とかを思い思いに追加しよう！

return <input {...props} ref={forwardedRef} />;

},

);

MyFancyInput.displayName = "MyFancyInput";