如何让同一个状态响应多个“元素”？

Question

我有一个容器，里面有不同数量的元素。我想要实现的是，无论悬停在哪个元素上，都应该显示悬停内容。但是使用当前代码，无论您将鼠标悬停在哪一个上，它们都会同时显示。有没有一种解决方案，只让您悬停的内容可见，而不使用多个状态。

这里是一个沙箱代码：https://codesandbox.io/embed/mystifying-sun-g4yjg?fontsize=14&hidenavigation=1&theme=dark

提前致谢！

Answer 1

当状态在父项中时，您无法区分悬停的项目。为您的 HoverBox 创建一个单独的子组件并将状态移动到其中（这样每个框都将保持其自己的悬停状态）。

这是一个沙盒：

https://codesandbox.io/s/charming-rain-rhf73?file=/src/HoverBox.js