我非常喜欢React中的内联CSS模式，并决定使用它。
但是，你不能使用:hover和类似的选择器。那么，在使用内联CSS样式时实现高亮悬停的最佳方法是什么呢?
#reactjs的一个建议是有一个Clickable组件，并像这样使用它:
<Clickable>
<Link />
</Clickable>
Clickable有一个悬停状态，并将其作为道具传递给链接。然而，Clickable(我实现它的方式)将链接包装在一个div中，以便它可以设置onMouseEnter和onMouseLeave。这让事情变得有点复杂(例如，在div中包装的span与span的行为不同)。
有没有更简单的方法?
当前回答
onMouseOver和onMouseLeave with setState起初似乎对我来说有点开销-但这就是react的工作方式，对我来说这似乎是最简单和最干净的解决方案。
例如，呈现一个主题CSS服务器端也是一个很好的解决方案，可以使react组件更干净。
如果你不需要将动态样式附加到元素(例如主题)，你就不应该使用内联样式，而应该使用CSS类。
这是一个传统的html/css规则，以保持html/ JSX干净简单。
其他回答
下面是我如何在功能组件中使用钩子。使用onMouseEnter/Leave, im直接将颜色设置为状态，并在元素的样式道具中使用它(而不是设置悬停状态和使用三元组来改变状态，如前面的答案所示)。
function App() { const [col, setCol] = React.useState('white'); return ( <div className="App"> <button style={{background: `${col}`}} onMouseEnter={() => setCol("red")} onMouseLeave={() => setCol("white")} > Red </button> </div> ); } ReactDOM.render(<App/>, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script> <div id='root'></div>
简单的方法是使用三元运算符
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={this.state.hover ? {"backgroundColor": 'red'}: {"backgroundColor": 'blue'}} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
</div>
)
}
我也有同样的情况。非常喜欢在组件中保持样式的模式，但悬停状态似乎是最后一个障碍。
我所做的是写一个mixin，你可以添加到你的组件，需要悬停状态。 这个mixin将为组件的状态添加一个新的悬停属性。如果用户将鼠标悬停在组件的主DOM节点上，它将被设置为true;如果用户离开元素，它将被设置为false。
现在在你的组件渲染函数中，你可以这样做:
<button style={m(
this.styles.container,
this.state.hovered && this.styles.hover,
)}>{this.props.children}</button>
现在，每当悬浮状态的状态发生变化时，组件将重新呈现。
我还为此创建了一个沙盒回购，我自己用它来测试这些模式中的一些。如果您想查看我的实现示例，请查看它。
https://github.com/Sitebase/cssinjs/tree/feature-interaction-mixin
最简单的方式:2022年: useRef +内联onMouseOver/onMouseOut
例子:
var bottomAtag = useRef(null)
.．.然后在里面返回(
<a ref={bottomAtag} onMouseOver={() => bottomAtag.current.style.color='#0F0'} ...></a>
签出类型样式，如果你使用React和Typescript。
下面是:hover的示例代码
import {style} from "typestyle";
/** convert a style object to a CSS class name */
const niceColors = style({
transition: 'color .2s',
color: 'blue',
$nest: {
'&:hover': {
color: 'red'
}
}
});
<h1 className={niceColors}>Hello world</h1>
