reactjs - React 中的内联 CSS 样式 : how to implement a:hover?

Question

我很喜欢inline CSS pattern in React并决定使用它。

但是，您不能使用 :hover 和类似的选择器。那么使用内联 CSS 样式时实现悬停突出显示的最佳方法是什么？

#reactjs 的一个建议是拥有一个 Clickable 组件并像这样使用它:

<Clickable>
    <Link />
</Clickable>

Clickable 具有 hovered 状态，并将其作为属性传递给链接。但是，Clickable(我实现它的方式)将Link包装在div中，以便它可以设置onMouseEnter > 和 onMouseLeave 。但这使事情变得有点复杂(例如，包裹在 div 中的 span 的行为与 span 不同)。

有没有更简单的方法？

Answer 1

我认为 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)来更改链接的样式。