反应组件状态不起作用

Question

我一直在尝试在div元素上实现悬停效果，例如以下codeandbox： 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