在ReasonML中为React子元素添加鼠标监听器以实现无DOM布局干扰的Tooltip功能

嘿，这个需求我太懂了——不想让Tooltip组件本身的DOM节点干扰布局，又要给子元素加鼠标触发的提示功能，确实得绕开额外的容器节点。下面给你两个靠谱的方案，都是不需要额外DOM节点就能实现的：

方案一：通过React.cloneElement给子元素添加事件监听器 #

这是最符合React/ReasonML思维的方式，直接克隆你的子元素，给它添加上鼠标事件和必要的状态管理，完全不会新增任何DOM节点。

核心思路是：用useState管理Tooltip的显示状态，然后克隆传入的children元素，给它附加onMouseEnter、onMouseLeave这些事件处理函数，同时把Tooltip的渲染逻辑和状态关联起来（推荐用ReactDOM.Portal把Tooltip挂载到body上，彻底避免布局影响）。

这里有个具体的ReasonML代码示例：

open React;
open ReactDOM;

module Tooltip = {
  let component = ReasonReact.statelessComponent("Tooltip");

  let make = (~content: React.element, ~children: React.element, ()) => {
    ...component,
    render: (_) => {
      let (isVisible, setIsVisible) = React.useState(() => false);

      // 克隆子元素，添加鼠标事件；如果子元素本身已有事件，记得合并处理
      let enhancedChild = React.cloneElement(
        children,
        {
          "onMouseEnter": (e) => {
            // 先执行子元素原有事件（如果存在）
            switch Js.Nullable.toOption(children.props##onMouseEnter) {
            | Some(originalFn) => originalFn(e)
            | None => ()
            };
            setIsVisible(true);
          },
          "onMouseLeave": (e) => {
            switch Js.Nullable.toOption(children.props##onMouseLeave) {
            | Some(originalFn) => originalFn(e)
            | None => ()
            };
            setIsVisible(false);
          },
        },
      );

      <>
        {enhancedChild}
        {/* 用Portal把Tooltip挂载到body，彻底脱离当前布局流 */}
        {isVisible ?
          Portal.create(
            ~container=Dom.document##body,
            <div className="tooltip-style"> {content} </div>,
          )
          : React.null}
      </>;
    },
  };
};

// 使用示例
<Tooltip content={<span>这是提示内容</span>}>
  <button> hover我看提示 </button>
</Tooltip>

这个方法的好处是：完全没有额外的DOM容器，所有事件直接绑定在你的子元素上，不会有display:contents带来的CSS继承问题；而且不管子元素是原生DOM组件还是自定义React组件，只要它接受鼠标事件props，就能正常工作。

方案二：通过Ref获取子元素引用，手动绑定事件 #

如果你的子元素是原生DOM元素（比如div、button），也可以用Ref获取它的DOM节点，然后在useEffect里手动添加/移除事件监听器。

代码示例如下：

open React;
open ReactDOM;

module Tooltip = {
  let component = ReasonReact.statelessComponent("Tooltip");

  let make = (~content: React.element, ~children: React.element, ()) => {
    ...component,
    render: (_) => {
      let (isVisible, setIsVisible) = React.useState(() => false);
      let childRef = React.useRef(Js.Nullable.null);

      React.useEffect1(() => {
        switch Js.Nullable.toOption(childRef.current) {
        | Some(el) =>
          let handleMouseEnter = (_) => setIsVisible(true);
          let handleMouseLeave = (_) => setIsVisible(false);
          el->Dom.Element.addEventListener("mouseenter", handleMouseEnter);
          el->Dom.Element.addEventListener("mouseleave", handleMouseLeave);
          // 组件卸载时移除事件，避免内存泄漏
          Some(() => {
            el->Dom.Element.removeEventListener("mouseenter", handleMouseEnter);
            el->Dom.Element.removeEventListener("mouseleave", handleMouseLeave);
          });
        | None => None
        }
      }, [||]);

      <>
        {/* 给子元素绑定ref */}
        {React.cloneElement(children, {"ref": React.Ref.domRef(childRef)})}
        {isVisible ?
          Portal.create(
            ~container=Dom.document##body,
            <div className="tooltip-style"> {content} </div>,
          )
          : React.null}
      </>;
    },
  };
};

这个方法适合子元素是原生DOM的场景，或者当你的自定义子元素不接受鼠标事件props的时候，但要注意如果子元素是自定义React组件，你需要确保它把ref传递给了内部的原生DOM元素（也就是forwardRef的用法）。

额外提示：Tooltip的布局处理 #

不管用哪个方案，都强烈建议用ReactDOM.Portal把Tooltip渲染到body或者专门的容器里，然后配合position: absolute/fixed来定位，这样Tooltip的显示完全不会影响页面的正常布局，也不会被父元素的overflow属性截断。

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