我非常喜欢React中的内联CSS模式，并决定使用它。
但是，你不能使用:hover和类似的选择器。那么，在使用内联CSS样式时实现高亮悬停的最佳方法是什么呢?
#reactjs的一个建议是有一个Clickable组件，并像这样使用它:
<Clickable>
<Link />
</Clickable>
Clickable有一个悬停状态，并将其作为道具传递给链接。然而，Clickable(我实现它的方式)将链接包装在一个div中，以便它可以设置onMouseEnter和onMouseLeave。这让事情变得有点复杂(例如，在div中包装的span与span的行为不同)。
有没有更简单的方法?
当前回答
我在我最近的一个应用程序中使用了一个相当hack的解决方案，它符合我的目的，我发现它比在香草js中编写自定义悬停设置函数更快(尽管，我承认，在大多数环境中可能不是最佳实践..)所以，如果你还感兴趣，我告诉你。
我创建了一个父元素，只是为了保存内联javascript样式，然后是一个带有className或id的子元素，我的css样式表将锁定并在我的专用css文件中写入悬浮样式。这是因为更细粒度的子元素通过继承接收内联js样式，但其悬停样式被css文件覆盖。
基本上，我的css文件存在的唯一目的就是保存悬停效果，没有别的。这使得它非常简洁，易于管理，并允许我在我的内联React组件样式中做繁重的工作。
这里有一个例子:
const styles = { container: { height: '3em', backgroundColor: 'white', display: 'flex', flexDirection: 'row', alignItems: 'stretch', justifyContent: 'flex-start', borderBottom: '1px solid gainsboro', }, parent: { display: 'flex', flex: 1, flexDirection: 'row', alignItems: 'stretch', justifyContent: 'flex-start', color: 'darkgrey', }, child: { width: '6em', textAlign: 'center', verticalAlign: 'middle', lineHeight: '3em', }, }; var NavBar = (props) => { const menuOptions = ['home', 'blog', 'projects', 'about']; return ( <div style={styles.container}> <div style={styles.parent}> {menuOptions.map((page) => <div className={'navBarOption'} style={styles.child} key={page}>{page}</div> )} </div> </div> ); }; ReactDOM.render( <NavBar/>, document.getElementById('app') ); .navBarOption:hover { color: black; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div>
注意，“child”内联样式没有“color”属性集。如果是这样，这将不起作用，因为内联样式将优先于样式表。
其他回答
这可以是一个很好的hack内联样式在一个react组件(也使用:hover CSS函数):
...
<style>
{`.galleryThumbnail.selected:hover{outline:2px solid #00c6af}`}
</style>
...
完全的CSS支持正是大量的CSSinJS库的原因，为了有效地做到这一点，你需要生成实际的CSS，而不是内联样式。此外，内联样式在大系统中的反应要慢得多。免责声明-我维护JSS。
补充乔纳森的回答，这里是事件覆盖的焦点和活跃状态，使用onMouseOver而不是onMouseEnter，因为后者不会冒泡，如果你有任何子元素的目标事件被应用到。
var Link = React.createClass({
getInitialState: function(){
return {hover: false, active: false, focus: false}
},
toggleHover: function(){
this.setState({hover: !this.state.hover})
},
toggleActive: function(){
this.setState({active: !this.state.active})
},
toggleFocus: function(){
this.setState({focus: !this.state.focus})
},
render: function() {
var linkStyle;
if (this.state.hover) {
linkStyle = {backgroundColor: 'red'}
} else if (this.state.active) {
linkStyle = {backgroundColor: 'blue'}
} else if (this.state.focus) {
linkStyle = {backgroundColor: 'purple'}
}
return(
<div>
<a style={linkStyle}
onMouseOver={this.toggleHover}
onMouseOut={this.toggleHover}
onMouseUp={this.toggleActive}
onMouseDown={this.toggleActive}
onFocus={this.toggleFocus}>
Link
</a>
</div>
)
}
onMouseOver和onMouseLeave with setState起初似乎对我来说有点开销-但这就是react的工作方式，对我来说这似乎是最简单和最干净的解决方案。
例如，呈现一个主题CSS服务器端也是一个很好的解决方案，可以使react组件更干净。
如果你不需要将动态样式附加到元素(例如主题)，你就不应该使用内联样式，而应该使用CSS类。
这是一个传统的html/css规则，以保持html/ JSX干净简单。
<Hoverable hoverStyle={styles.linkHover}>
<a href="https://example.com" style={styles.link}>
Go
</a>
</Hoverable>
其中Hoverable定义为:
function Hoverable(props) {
const [hover, setHover] = useState(false);
const child = Children.only(props.children);
const onHoverChange = useCallback(
e => {
const name = e.type === "mouseenter" ? "onMouseEnter" : "onMouseLeave";
setHover(!hover);
if (child.props[name]) {
child.props[name](e);
}
},
[setHover, hover, child]
);
return React.cloneElement(child, {
onMouseEnter: onHoverChange,
onMouseLeave: onHoverChange,
style: Object.assign({}, child.props.style, hover ? props.hoverStyle : {})
});
}
