但是，您不能使用:hover和类似的选择器。那么在使用内联 CSS 样式时实现悬停高亮的最佳方法是什么？
#reactjs 的一个建议是拥有一个Clickable组件并像这样使用它：
<Clickable>
<Link />
</Clickable>
该Clickable有一个hovered状态，并将其作为props的链接。但是，Clickable（我实现它的方式）将 包装Link在 a 中，div以便它可以设置onMouseEnter和onMouseLeave到它。这让事情变得有点复杂（例如，span包裹在 a 中的div行为与 不同span）。
有没有更简单的方法？
我认为 onMouseEnter 和 onMouseLeave 是可行的方法，但我认为不需要额外的包装器组件。这是我如何实施它：
var Link = React.createClass({
getInitialState: function(){
return {hover: false}
},
toggleHover: function(){
this.setState({hover: !this.state.hover})
},
render: function() {
var linkStyle;
if (this.state.hover) {
linkStyle = {backgroundColor: 'red'}
} else {
linkStyle = {backgroundColor: 'blue'}
}
return(
<div>
<a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
</div>
)
}
然后，您可以使用悬停状态 (true/false) 来更改链接的样式。
聚会迟到，但有解决方案。您可以使用“&”来定义悬停第 n 个子项等的样式：
day: {
display: "flex",
flex: "1",
justifyContent: "center",
alignItems: "center",
width: "50px",
height: "50px",
transition: "all 0.2s",
borderLeft: "solid 1px #cccccc",
"&:hover": {
background: "#efefef"
},
"&:last-child": {
borderRight: "solid 1px #cccccc"
}
},
我处于同样的情况。真的很喜欢在组件中保持样式的模式，但悬停状态似乎是最后一个障碍。
我所做的是编写一个 mixin，您可以将其添加到需要悬停状态的组件中。这个 mixin 会hovered为你的组件的状态添加一个新的属性。true如果用户将鼠标悬停在组件的主 DOM 节点上，它将被设置为，并false在用户离开元素时将其设置回。
现在在您的组件渲染函数中，您可以执行以下操作：
<button style={m(
this.styles.container,
this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>
现在每次hovered状态改变时组件都会重新渲染。
我还为此创建了一个沙箱存储库，用于自己测试其中的一些模式。如果您想查看我的实现示例，请查看它。
https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin
你可以使用 Radium——它是一个用于 ReactJS 内联样式的开源工具。它准确地添加了您需要的选择器。非常受欢迎，请查看 - npm 上的 Radium
这是我使用 React Hooks 的解决方案。它结合了扩展运算符和三元运算符。
样式.js
export default {
normal:{
background: 'purple',
color: '#ffffff'
},
hover: {
background: 'red'
}
}
按钮.js
import React, {useState} from 'react';
import style from './style.js'
function Button(){
const [hover, setHover] = useState(false);
return(
<button
onMouseEnter={()=>{
setHover(true);
}}
onMouseLeave={()=>{
setHover(false);
}}
style={{
...style.normal,
...(hover ? style.hover : null)
}}>
MyButtonText
</button>
)
}