如何判断鼠标是否悬停在特定React组件？求非jQuery/原生JS方案

问题描述 #

我需要在鼠标悬停应用内某个特定React组件时，根据这个条件停止部分行为。目前只找到基于jQuery和原生JavaScript的旧解决方案，想知道有没有其他可行的实现方式？

目标组件代码如下：

<ContentRightHandSide offset={bannerHidden ? 80 : 120}>
  <ContentTitle>
    Activity
    <img
      style={{
        display: "inline",
        position: "relative",
        marginLeft: "20px",
        width: "35px",
      }}
      src={calendarIcon}
    />
  </ContentTitle>

  {authStatus === "authenticated" ? (
    <ShareLogs
      linkShareLogs={activeShareLogs}
      isBannerHidden={bannerHidden}
      hovered={hoveredNode}
      selected={selectedNode}
    />
  ) : (
    <div style={{ position: "relative" }}>
      <img
        src={blurredScreenLinks}
        style={{
          fontSize: "24px",
          position: "relative",
          margin: "0 auto",
          width: "100%",
        }}
      />

      <button
        style={{
          backgroundColor: "#F7F1FF",
          color: "#35373B",
          position: "absolute",
          fontFamily: "lato",
          left: "0",
          right: "0",
          marginLeft: "auto",
          marginRight: "auto",
          width: "320px",
          top: "100px",
          padding: "0px 20px",
          display: "flex",
          alignItems: "center",
          borderRadius: "60px",
        }}
        onClick={handleSignInClick}
      >
        <img
          style={{
            display: "inline",
            position: "relative",
            width: "80px",
            cursor: "pointer",
            margin: "-5px",
          }}
          src={slackIcon}
        />
        <span style={{ textAlign: "left" }}>
          Lorem Ipsum                  
        </span>
      </button>
    </div>
  )}
</ContentRightHandSide>

可行实现方案 #

方式一：React内置状态+鼠标事件绑定 #

直接给目标组件添加onMouseEnter和onMouseLeave事件，配合useState维护悬停状态，后续在需要控制行为的逻辑中判断该状态即可。

示例代码：

import { useState } from 'react';

// 组件内部状态定义
const [isHovering, setIsHovering] = useState(false);

// 修改目标组件，绑定鼠标事件
<ContentRightHandSide
  offset={bannerHidden ? 80 : 120}
  onMouseEnter={() => setIsHovering(true)}
  onMouseLeave={() => setIsHovering(false)}
>
  {/* 原有组件内容 */}
</ContentRightHandSide>

// 在需要控制行为的逻辑中使用状态判断
const someFunction = () => {
  if (isHovering) {
    // 停止当前行为，直接返回或跳过执行
    return;
  }
  // 正常执行的业务逻辑
};

方式二：自定义Hook封装悬停逻辑 #

如果多个组件需要复用悬停判断逻辑，可以封装成自定义Hook，提升代码复用性。

示例代码：

import { useState, useCallback } from 'react';

// 自定义悬停Hook
const useHover = () => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
  const handleMouseLeave = useCallback(() => setIsHovered(false), []);

  return {
    isHovered,
    handlers: {
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave
    }
  };
};

// 在组件中使用Hook
const { isHovered, handlers } = useHover();

<ContentRightHandSide
  offset={bannerHidden ? 80 : 120}
  {...handlers}
>
  {/* 原有组件内容 */}
</ContentRightHandSide>

// 同样通过isHovered状态控制行为
if (isHovered) {
  // 停止对应行为
}

方式三：针对第三方组件的DOM监听 #

如果目标组件是第三方库提供的，没有暴露鼠标事件props，可以通过useRef获取DOM元素，手动添加原生事件监听。

示例代码：

import { useState, useEffect, useRef } from 'react';

// 创建Ref引用目标组件DOM
const contentRef = useRef(null);
const [isHovering, setIsHovering] = useState(false);

useEffect(() => {
  const targetElement = contentRef.current;
  if (!targetElement) return;

  // 定义事件处理函数
  const handleMouseEnter = () => setIsHovering(true);
  const handleMouseLeave = () => setIsHovering(false);

  // 添加事件监听
  targetElement.addEventListener('mouseenter', handleMouseEnter);
  targetElement.addEventListener('mouseleave', handleMouseLeave);

  // 组件卸载时清理事件监听
  return () => {
    targetElement.removeEventListener('mouseenter', handleMouseEnter);
    targetElement.removeEventListener('mouseleave', handleMouseLeave);
  };
}, []);

// 给目标组件绑定Ref
<ContentRightHandSide
  ref={contentRef}
  offset={bannerHidden ? 80 : 120}
>
  {/* 原有组件内容 */}
</ContentRightHandSide>

内容的提问来源于stack exchange，提问作者deadant88