react里面 内联css样式怎么样_React中的内联CSS样式：如何实现：hover？

我处于同样的情况 真的很喜欢保持组件风格的模式，但hover状态似乎是最后一个障碍。

我所做的是写一个混合，你可以添加到你需要hover状态的组件。 这个mixin将会为你的组件添加一个新的hovered属性。 如果用户将鼠标hover在组件的主要DOM节点上，则将其设置为true如果用户离开该元素，则将其设置为false 。

现在在你的组件渲染function，你可以做这样的事情：

{this.props.children}

现在，每当hovered状态的状态发生变化时，组件将重新渲染。

我也为此创build了一个沙盒回购，我自己用来testing这些模式。 如果你想看到我的实现的例子，请检查它。

我认为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(

Link

) }

然后，您可以使用hover状态(true / false)来更改链接的样式。

您可以使用Radium – 它是一个使用R