在 Function 組件上使用 React.cloneElement 時如何設置引用？

Question

我正在編寫一個Tooltip組件並遇到以下問題 -

Function 元件不能給出參考

我的代碼看起來像這樣

包含Tooltip的組件：

<Tooltip title="Title" description="Description">
   <Selection value={copy.value} label={copy.label} />
</Tooltip>

工具提示組件：

import React, { useRef } from 'react'

const Tooltip = props => {
   const myRef = useRef()

   const child = React.cloneElement(props.children, {
      onMouseEnter: () => { /* placeholder */ },
      onMouseLeave: () => { /* placeholder */ },
      ref: myRef,
   })

   const TooltipOverlay = () => {
      // will be a div wrapped in react Portal
      return null
   }

   return (
      <>
         {child}
         <TooltipOverlay />
      </>
   )
}

export default Tooltip

我的目標是在 DOM 中沒有可見的包裝器，例如 div/span 或類似的。 我需要 ref 能夠在Tooltip組件中相對 position TooltipOverlay 。 只要實現上述目標，所有解決方案都是受歡迎的。

我在rsuite庫中看到了這個，不知道怎么做。

Answer 1

有同樣的問題，無法找到一種方法來做你想做的事。

作為一種解決方法，我想通常的方法是讓Tooltip的用戶向下傳遞ref ，然后您可以使用forwardRef攔截它。

const Tooltip = forwardRef((props, myRef) => {
  // now you can clone without a ref and have access to the ref.
})

然而，工具提示的用戶需要傳遞一個 ref：

const childRef = useRef()

<Tooltip ref={childRef}>
  <div ref={childRef} />
</Tooltip>