Question

我一直在尝试对div元素实现悬停效果，就像在这个代码框中一样： https://codesandbox.io/s/XopkqJ5oV

我想要执行此操作的组件是在同一页面上多次使用的可重用组件。我想这就是为什么我无法让它发挥作用的原因。我错过了什么？

即使使用上述代码也无法在我的应用程序中使用。

编辑：感谢您的回复。我发现了这个问题：

我没有让 ShouldComponentUpdate 知道，它应该考虑state.isHovering。

 shouldComponentUpdate(nextProps, nextState) {
    return (
      nextProps.post.id !== this.props.post.id ||
      nextProps.screenshotClickUrl !== this.props.screenshotClickUrl ||
      nextProps.onImageClick !== this.props.onImageClick ||
      nextProps.handleMouseHover !== this.props.handleMouseHover ||
      nextState.isHovering !== this.state.isHovering
    )
  }

Answer 1

您错过了this：

  toggleHoverState(state) {
    return {
      isHovering: !state.isHovering // Need a "this" to access state.
    };
  }

如果您将元素堆得太紧，则会干扰鼠标进入/离开事件，例如，如果您将它们分开：

const Foo = () => {
  return (
    <div>
      <HoverExample />
      <div style={{height: '2em', border: '1px solid blue'}} />
      <HoverExample />
    </div>
  )
}

它的工作方式（我认为）你会期待。

https://codesandbox.io/s/93l25m453o

我在它周围放置边框以帮助可视化问题。

如果这没有意义，请查看当悬停指示符位于相邻跨度而非堆叠时会发生什么：

https://codesandbox.io/s/5k5jj3rpok

反应组件状态不起作用

1 个答案: