在React中内联CSS样式：如何实现：悬停？

Question

我非常喜欢React中的内联CSS模式，并决定使用它。

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

#reactjs的一个建议是使用一个可点击的组件，并像这样使用它：

<Clickable>
    <Link />
</Clickable>

可点击有一个悬停状态，并将其作为道具传递给链接。但是，可点击的（我实现它的方式）将链接包装在div中，这样它就可以设置onMouseEnter和onMouseLeave。这使得事情有点复杂（例如，包装在div中的span的行为与span不同）。

有没有更简单的方法？




Answer 1

我也处于同样的情况。非常喜欢在组件中保持样式的模式，但悬停状态似乎是最后一个障碍。

我所做的是编写一个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

Answer 2

聚会迟到了，但有了解决办法。你可以使用“

day: {
    display: "flex",
    flex: "1",
    justifyContent: "center",
    alignItems: "center",
    width: "50px",
    height: "50px",
    transition: "all 0.2s",
    borderLeft: "solid 1px #cccccc",

    "&:hover": {
      background: "#efefef"
    },
    "&:last-child": {
      borderRight: "solid 1px #cccccc"
    }
},

Answer 3

我认为onMouseEnter和onMouseLe是可行的方法，但我认为不需要额外的包装器组件。以下是我如何实现它：

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）来更改链接的样式。