React中的内联CSS样式：如何实现a:hover？

13 浏览
0 Comments

React中的内联CSS样式：如何实现a:hover？

我很喜欢React中的inline CSS模式，所以决定使用它。

然而，你不能使用:hover和类似的选择器。那么在使用内联CSS样式的同时实现鼠标悬停高亮的最佳方法是什么呢？

#reactjs提出的一个建议是拥有一个Clickable组件并像此示例中一样使用它：

Clickable具有一个hovered状态，并将其作为属性传递给链接。然而，Clickable（按照我实现的方式）将Link包装在一个div中，以便它可以将 onMouseEnter和onMouseLeave设置给它。然而这使得事情变得有点复杂（例如，span被包装在div中的行为与span不同）。

有更简单的方法吗？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

迟到了但是还是有解决方案的。你可以使用 \"&\"来定义鼠标悬停和nth Child等的样式： \n

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"
    }
},

0
0 Comments

我认为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
    )
}

然后，您可以使用悬停的状态（true/false）来改变链接的样式。

0