小编oct*_*eau的帖子

我正在使用 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..

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