在 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>