onMouseEnter

我想根据鼠标悬停状态来显示或隐藏一个小面板。 当我悬停在链接上时，面板会显示出来。 然后我可以用鼠标进入这个面板，当我移开鼠标时，面板会隐藏起来。 就像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元素，所以它无法响应被触发的事件。 我必须将onMouseEnter和onMouseLeave作为props传递给ProfileCard组件，然后在组件内部找到可以接收这些事件的正确DOM元素，并在那里附加事件处理程序。在这种情况下，我使用了容器div： const ProfileCard = ({ onMouseEnter, onMouseLeave }) => ( <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}> ... 现在当离开面板时，它会隐藏起来。