我想根据鼠标悬停状态来显示或隐藏一个小面板。

当我悬停在链接上时,面板会显示出来。

然后我可以用鼠标进入这个面板,当我移开鼠标时,面板会隐藏起来。

就像Twitter上的个人资料,在鼠标悬停在一个人的名字上时会显示出来:

对于触发面板显示的<a>元素,我添加了onMouseEnter事件:

<a
 onMouseEnter={() => {
 setShowCard(true)
 }}
>flavio</a>

所以当我用鼠标悬停在它上面时,面板会显示出来,因为它是根据我之前设置的showCard状态变量来显示的:

const [showCard, setShowCard] = useState(false)

然后我有一个ProfileCard组件,但是我不能简单地这样做:

<ProfileCard
onMouseEnter={() => {
 setShowCard(true)
}}
onMouseLeave={() => {
 setShowCard(false)
}}
/>

因为它不起作用。ProfileCard不是一个DOM元素,所以它无法响应被触发的事件。

我必须将onMouseEnteronMouseLeave作为props传递给ProfileCard组件,然后在组件内部找到可以接收这些事件的正确DOM元素,并在那里附加事件处理程序。在这种情况下,我使用了容器div

const ProfileCard = ({
 onMouseEnter,
 onMouseLeave
}) => (
 <div
 onMouseEnter={onMouseEnter}
 onMouseLeave={onMouseLeave}>
 ...

现在当离开面板时,它会隐藏起来。