在 React 中使用 onMouseEnter 事件时遇到问题

Question

我正在尝试使用React和hooks构建一个导航栏，其中每个div将在onMouseEnter和onMouseLeave上更改为特定颜色。如果我将鼠标悬停在一个上，我无法弄清楚为什么它们都会受到影响。我想我在问我怎样才能让他们彼此独立。

对不起，如果这是一个非常明显的错误。还是很绿的。再次感谢！

以下是代码沙盒的链接： https://codesandbox.io/s/holy-snowflake-twojb?file=/src/navbar.js

Answer 1

我重构了你的代码。 您可以在 https://codesandbox.io/s/lucid-lake-u3oox?file=/src/navbar.js 中签入

Answer 2

您正在使用函数setBackground在hoverStyleCSS 类中设置背景颜色，这会影响所有<div className="hoverStyle">标签。

有很多选择可以做到这一点。如果你想用 React 来做到这一点，一种方法是创建一个像这样的 CSS 类：

.active {
background-color: #ffac4e;
}

然后，创建一个功能组件

const Activable = ({ className, children, bgColor}) => {
const [active, setActive] = useState('#fff');
return (
<div className={`${ className } ${ active }`
onMouseEnter = {() => setActive( bgColor )}
onMouseLeave = {() => setActive('#fff')}
>
{ children }
</div>
)
}

然后将你的 ' 替换为这个新组件，如下所示：

<Activable className="hoverStyle" bgColor="#ffac4e">
<div style = {navChildLeft}>2020</div>
<div style = {navChildTop}>
Shy RL <br />
Digital - Album art
</div>
</Activable>

并重复<div>的其余部分

Answer 3

对于 react，考虑可重用的组件很重要。如何创建可以在项目的不同部分一遍又一遍地重用的东西。

查看此按组件划分的项目示例。 https://codesandbox.io/s/holy-brook-3jror?fontsize=14&hidenavigation=1&theme=dark

我建议阅读以下内容以提供帮助：https://reactjs.org/docs/thinking-in-react.html