如何解决尾风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
组件的子代尚未呈现。
随后在打开时按此按钮可解决此问题。
- 单击按钮继续问题。
- 打开按钮后单击即可解决问题,但我不明白为什么。
解决方法
使用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 });
}
},[]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。