如何无需修改自定义组件，将Floating UI与接收RefObject的React组件结合？

你可以通过创建一个标准的RefObject作为中转，既满足自定义组件对RefObject的要求，又能把元素传递给Floating UI的setFloating，无需修改自定义组件代码。

具体实现步骤： #

1. 创建一个普通的useRef作为中转引用，这是标准的RefObject，能被自定义组件正常接收
2. 通过useEffect监听中转引用的current变化，一旦元素挂载/更新，就调用setFloating把元素传给Floating UI
3. 将中转引用传给自定义组件的ref属性

修改后的示例代码： #

const App = ()=>{
    const { refs, ...rest } = useFloating<HTMLDivElement>({ /* 你的配置 */ })
    // 创建中转的标准RefObject
    const floatingRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        // 当中转ref的current有值时，同步给Floating UI的setFloating
        if (floatingRef.current) {
            refs.setFloating(floatingRef.current);
        }
    }, [floatingRef.current, refs.setFloating]);

    return <div>        
        {/* 把中转ref传给自定义组件 */}
        <Custom ref={floatingRef} /> 
    </div>
}

// 自定义组件保持不变
const Custom = React.ForwardRef((
    props,
    forwardedRef:React.RefObject<HTMLDivElement>
)=>{
    const internalRef = useRef();
    const selectRef = forwardedRef ?? internalRef
    
    useEffect(()=>{
        // 现在selectRef.current能正常访问元素了
        if (selectRef.current) {
            console.log(selectRef.current);
        }
    }, [selectRef.current])
    return <div ref={selectRef}>Hi</div>    
})

为什么这个方案可行？ #

• 自定义组件接收的floatingRef是标准的RefObject，内部的selectRef.current能正常获取元素，不会出现之前的报错
• 通过useEffect监听中转ref的变化，确保Floating UI总能拿到最新的元素实例，不影响浮层定位逻辑

关于mergeRef的说明 #

Floating UI的mergeRef返回的是回调函数类型的ref，而你的自定义组件只接受RefObject类型的forwardedRef，所以直接用mergeRef无法满足组件的类型要求，中转RefObject的方案更适配你的场景。

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