使用 Portal 时出现 React Modal 和 Tooltip 问题

Question

我有一个简单的 Modal 组件和一个简单的 Tooltip 组件。两者都可以通过点击触发按钮打开并通过点击外部关闭。为了检测外部点击，我使用了这个简单的钩子：

const useClickAway = (
  ref: Ref,
  condition: boolean,
  handler: Handler
): void => {

  useEffect(() => {
    const listener = (e: Event) => {
      if (!ref.current || ref.current.contains(e.target as Node)) {
        return;
      }
      handler(e);
    };
    if (condition) {
      document.addEventListener('mouseup', listener);
      document.addEventListener('touchend', listener);
    }
    return () => {
        document.removeEventListener('mouseup', listener);
        document.removeEventListener('touchend', listener);
    };
  }, [ref, handler, condition]);
};

这就是我使用它的方式：

/*
* ref - reference to the modal container
* isOpen - The modal state.
* handleClose - Handler that closes the modal.
*/
useClickAway(ref, isOpen, handleClose)

到目前为止它工作正常，但是当我尝试在此 Modal 内渲染我的工具提示（使用 Portal 将其渲染到 body 元素中，而不是反应树）时出现了问题。

当我打开模态然后打开其中的工具提示时，单击工具提示会导致模态关闭。因为点击工具提示被认为是点击了模态框的外部。

谁能为这个问题提供干净的解决方案？

Answer 1

我相信您可以利用 forwardRef 传递在 Modal Tooltip 共享父级中定义的 ref。

我会这样做：

首先，我将重写Tooltip 和Modal 以接受可选的外部属性ref。如：

const Tooltip = React.forwardRef((props, ref) => {
  const tooltipLocalRef = useRef(null);
  const tooltipRef = ref || tooltipLocalRef;

  //
});

// usage:
const tooltipRef = useRef(null);
<Tooltip ref={tooltipRef} anotherProps={someValue} />

Modal 组件也是如此，但是除了我们将用于 Modal 本身的 ref 之外，我们还将发送 tooltipRef 作为额外的 prop。

const tooltipRef = useRef(null);
const modalRef = useRef(null);


<Tooltip ref={tooltipRef} anotherProp={someValue} />
<Modal ref={modalRef} tooltipRef={tooltipRef} anotherProp={someValue} />

通过这样做，我相信我们可以检查模式外的点击，并在该目标位于 tooltipRef.current 节点内时例外。

模态handleClose处理程序的额外工作：

function handleClose(e) {
      if (!props.tooltipRef.current || props.tooltipRef.current.contains(e.target as Node)) {
        return;
      }
      setModalOpen(false)
}

我还没有测试过，让我知道结果如何。