Question

我有一个具有实现悬停效果的React组件，如下所示：

let style = {
  backgroundColor: "blue"
}

class someComponent extends React.Component{

  constructor(props){
    super(props)

    this.state = {
      hover: false
    }
  }

  handleHover(event) {
    this.setState({ hover: true });
  }

  handleExit(event) {
    this.setState({ hover: false });
  }

  render(){
    if(this.state.hover){
      style.backgroundColor = "red"
    } else {
      style.backgroundColor = "blue"
    }

    return(
      <Segment style={style} onMouseEnter={this.handleHover} onMouseLeave={this.handleExit} />
    );
  }
}

但是，即使它确实有效，我也会收到错误消息：

警告：div传递了之前的样式对象突变。不推荐使用变异style。考虑克隆它预先。查看render的{{1}}。

我从这个post中查找答案，并说它以这种方式实现：

Segment

但是，我的样式是在类之外定义的，我没有从父组件中传递任何样式。所以我不太确定如何将这个答案应用到我当前的代码中。

问题：

这是否是实现悬停效果的最佳方法，还是应该像错误建议一样克隆组件？
我应该如何在当前组件中实现答案？如有必要，可以更改结构。

Answer 1

只需使用hover状态来确定样式，而不是将其存储在单独的对象中。因为背景颜色取决于状态，不要将其存储在组件外部，使用三元运算符将其绑定到状态：

<Segment style={{
  backgroundColor: this.state.hover ? 'red' : 'blue'
}} />

如果您有其他样式，只需使用扩展语法：

<Segment style={{
  ...styleObj,
  backgroundColor: this.state.hover ? 'red' : 'blur'
}} />

这将复制styleObj中已有的所有样式，然后也应用背景颜色。您可以在React JSX here中了解有关传播语法的更多信息。

如何实现悬停效果而不直接改变样式？

1 个答案: