使用Headless UI Transition.Child时的ref传递问题求助

这个错误的核心原因是Headless UI的Transition.Child需要获取真实DOM节点的ref来处理过渡动画，但你的写法存在两个问题：

1. 用了as={Fragment}，Fragment本身没有对应的DOM节点，无法挂载ref；
2. 抽离出来的Cart组件默认不会接收并透传Transition.Child传递的ref，导致Transition拿不到真实DOM节点。

解决步骤如下：

1. 用React.forwardRef重构Cart组件，透传ref到内部根DOM元素 #

把Cart组件改成用forwardRef包裹，接收Transition传递的ref，并绑定到组件内部的根DOM节点上（比如原来你写的容器div）：

import React, { forwardRef } from 'react';

const Cart = forwardRef((props, ref) => {
  const {
    cancelButtonReference,
    setCartOpen,
    checkoutUrl,
    removeCartItem,
    clearCart,
    cartLoading,
    incrementCartItem,
    decrementCartItem,
    cartTotal,
    cart
  } = props;

  return (
    {/* 把ref绑定到这个根DOM元素上 */}
    <div ref={ref}>
      {/* 原来的Cart组件内容 */}
    </div>
  );
});

export default Cart;

2. 移除Transition.Child的as={Fragment}配置 #

现在Cart组件已经能接收并透传ref了，直接使用Transition.Child包裹Cart即可：

<Transition.Child>
  <Cart
    cancelButtonReference={cancelButtonReference}
    setCartOpen={setCartOpen}
    checkoutUrl={checkoutUrl}
    removeCartItem={removeCartItem}
    clearCart={clearCart}
    cartLoading={cartLoading}
    incrementCartItem={incrementCartItem}
    decrementCartItem={decrementCartItem}
    cartTotal={cartTotal}
    cart={cart}
  />
</Transition.Child>

这样Transition.Child就能通过ref拿到Cart内部的真实DOM节点，正常执行过渡动画，同时也不会多出不必要的div（因为Cart内部的根div就是原来你写在Transition.Child里的容器）。如果你的Cart组件根元素是aside等其他DOM标签，只要把ref绑定到那个根元素上就行。

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