Headless UI Transition.child 错误为“您是否忘记将 `ref` 传递到实际的 DOM 节点”

Question

我正在使用 Transition 和 Dialog Headless UI 组件构建一个侧边栏。

过渡文档

当我分解 <Transition.Child> 之间传递的代码到它自己的组件时。我收到此错误：

Unhandled Runtime Error
Error: Did you forget to passthrough the `ref` to the actual DOM node?

Call Stack
eval
node_modules/@headlessui/react/dist/components/transitions/transition.js (1:3632)

失败代码：

<Transition.Child as={Fragment}>
    <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 as={Fragment}>
   <div>
     ...
   </div>
</Transition.Child>  

我理解我相信的错误，即当我将代码分解到它自己的组件 Transition.Child 时，它希望我传递一个 ref ，以便 React 知道它应该渲染一个组件而不是一个片段。

如果我删除 as={Fragment}，这会使 Transition 默认为 div，错误就会消失，但随后我会得到一个不需要的 div..

我需要通过什么参考？这是我不明白的。

Answer 1

您不需要传递引用，但组件需要接受引用并将其设置在实际元素上。该div元素将接受引用，这就是该方法起作用的原因。

尝试Cart使用创建组件React.forwardRef并在div.

const Cart = React.forwardRef((props, forwardedRef) => {
  return (
    <div ref={forwardedRef}>
    ...
    </div>
  )
})