React中的内联CSS样式：如何实现：悬停？

作者

我非常喜欢React中的内联CSS模式，并决定使用它

但是，不能使用：hover和类似的选择器。那么，在使用内联CSS样式时，实现悬停高亮显示的最佳方法是什么

#reactjs的一个建议是使用一个可点击的组件，并像这样使用它：

&lt；可点击&gt；
&lt；链接/&gt；
&lt/可点击&gt；

可点击有一个悬停状态，并将其作为道具传递给链接。但是，可点击的（我实现它的方式）将链接包装在div中，这样它就可以设置onMouseEnter和onMouseLeave。这使得事情有点复杂（例如，包装在div中的span的行为与span不同）

有没有更简单的方法

我认为onMouseEnter和onMouseLeave是可行的方法，但我认为不需要额外的包装器组件。下面是我如何实现它的：

var Link=React.createClass({
getInitialState:函数（）{
返回{hover:false}
},
toggleHover:function（）{
this.setState（{hover:！this.state.hover}）
},
render:function（）{
var-linkStyle；
if（this.state.hover）{
linkStyle={backgroundColor:'red'}
}否则{
linkStyle={backgroundColor:'blue'}
}
返回(
&lt；div&gt；
&lt；a style={linkStyle}onmouseinter={this.toggleHover}onMouseLeave={this.toggleHover}&gt；Link&lt；/a&gt；
&lt；/div&gt；
)
}

然后可以使用悬停状态（true/false）更改链接的样式

相关文章：

  1. 使用React路由器以编程方式导航
  2. 您是否可以在不调用setState的情况下强制React组件重新加载？
  3. 未捕获错误：不变冲突：元素类型无效：应为字符串（用于内置组件）或类/函数，但得到：对象
  4. 使用es6类时，React中的“super（）”和“super（props）”有什么区别？

发表评论

© 2026 开发百科-程序代码问答平台 • Built with