全てのpropsを子に渡さないと正しく動作しないようなコード
このように書くと正しく動作しない
code:ts
const Parent = () => {
const active, setActive = useState(false);
return (
<div>
<Child
onMouseEnter={() => setActive(true)}
onMouseLeave={() => setActive(false)}
active={active}
{active ? 'Active' : 'Inactive'}
</Child>
</div>
);
};
const Child = ({ children, active }) => {
return <div>{children}</div>;
};
Childを以下のように書き換えると正しく動作するようになる
code:ts
const Child = ({ children, ...props }) => {
return <div {...props}>{children}</div>;
};
要は、
「現在、子がhoverされているかどうか」を表すprops(acitive)
hoverされたことを感知するhandler
の2つがある時に、前者のみを子に渡してもactiveは反応しないよ、という挙動になる
headless UIのMenuが謎の挙動をしたのがきっかけ
Issueを投げた
Active State Not Correctly Passed to Menu Items When Extracted as a Separate Component in @headlessui/react · Issue #2609 · tailwindlabs/headlessui · GitHub
すると、バグじゃないぞいと返信が来た
最初は、render props pattern固有の問題かと思ったが、上述した通り関係なさそうだった
これかなり微妙な実装ではないだろうかmrsekut.icon
Issueにも書いたように、元々こんなふうに書いてたコードを
code:ts
<Menu.Item>
{({ active }) => {
return (
<a
className={${active && 'bg-blue-500'}}
href="/account-settings"
Account settings
</a>
);
}}
</Menu.Item>
リファクタして、<a>..</a>の部分を別Componentに切り分けた
code:ts
<Menu.Item>
{({ active }) => <A active={active} /> }
</Menu.Item>
そしたら動かなくなっていた
これ、型エラーも何も起こらないので、実際にマウスをかざしてみたりしないと気づくことはできない
こうすると動く
code:ts
<Menu.Item>
{({ active }) => (
// Insert a div
<div>
<A active={active} />
</div>
)}
</Menu.Item>
内部でこういうdivを用意しておいてくればこういう問題は起きない