我非常喜欢inline CSS pattern in React，并决定使用它.
但是，不能使用:hover和类似的 Select 器.那么，在使用内联CSS样式时，实现悬停高亮显示的最佳方法是什么？
#reactjs的一个建议是使用一个Clickable组件，如下所示:
<Clickable>
<Link />
</Clickable>
Clickable有一个hovered状态，并将其作为props 传递给链接.然而，Clickable(我实现它的方式)将Link封装在div中，这样就可以设置onMouseEnter和onMouseLeave.但这让事情变得有点复杂(例如，用div包装的span与span的行为不同).
有没有更简单的方法？
我也有同样的情况.非常喜欢在组件中保持样式的模式，但悬停状态似乎是最后一个障碍.
我所做的是编写一个mixin，可以添加到需要悬停状态的组件中.
现在，在组件渲染功能中，可以执行以下操作:
<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