尾风UI过渡组件+ React Spectrum覆盖不起作用

问题描述

沙盒： https://codesandbox.io/s/falling-brook-de970

包装：React Spectrum，Tailwind Transition Component

问题：useOverlayPosition使用两个引用，一个triggerRef和一个overlayRef来确定应该应用于弹出窗口的绝对位置。 / p>

没有过渡，定位就没有问题。

当我添加Transition component时，我注意到overlayRef并未在渲染后设置，因此不允许useOverlayPosition钩子确定要应用的正确定位道具。我认为这是因为state.isOpen为假，而Transition组件的子代尚未呈现。

随后在打开时按此按钮可解决此问题。

1. 单击按钮继续问题。
2. 打开按钮后单击即可解决问题，但我不明白为什么。

解决方法

使用callbackRef代替useRef解决了该问题。这样可以在分配参考后重新渲染组件。

在useRef中，更新ref.current不会触发重新渲染，但会触发callbackRef。

想法取自：https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

const [overlayRef,setOverlayRef] = React.useState<
    React.RefObject<HTMLElement>
  >({ current: null });

  const callbackRef = React.useCallback((node) => {
    if (node !== null) {
      setOverlayRef({ current: node });
    }
  },[]);