Hover效果在React里怎么实现才不卡顿？

司马雨诺提问于 2026-03-03 08:02:22 阅读 2

交互

我最近在做一个卡片列表，想给每个卡片加个hover时显示操作按钮的效果，但用onMouseEnter/onMouseLeave写完后，鼠标快速移入移出时按钮会疯狂闪烁，感觉特别卡。是不是我的写法有问题？

我试过用CSS的:hover，但因为操作按钮是动态生成的，有些状态要从父组件传下来，所以还是得用JS控制。下面是我现在的代码：

const Card = ({ id }) => {
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{ padding: '16px', border: '1px solid #eee' }}
    >
      卡片 {id}
      {isHovered && <button>编辑</button>}
    </div>
  );
};

我来解答赞 0 收藏

反馈

暂无解答