我有 4 个盒子(<li> 个元素)和 4 张图片。任务是在用户悬停特定框时显示特定图像。如果用户将鼠标悬停在框 0 上，则显示图像 0 如果 1 显示图像 1。
悬停时我更新状态 currantBox(例如 currantBox: 1)并将其传递给 img src 属性，如下所示:
<img src={this.props.content[this.props.currantBox]}/>
content是 JSON带有 img 路径的数组。问题是在每次悬停时使用react，即渲染，即状态更新 React 发出获取下载图像的请求，这根本没有效率。
实现我的想法或修复 currant 实现的最佳方式是什么？
最佳答案
如果不打算更改图像，我会建议使用完全 CSS 的解决方案。您可以使用 4 个图像生成 Sprite 并在悬停时更改 background-position 属性。
关于javascript - 如何在没有反应请求的情况下在 li hover 上显示特定图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44369469/