Как передать ссылку из React.forwardRef в клонированный элемент? - PullRequest
Новая
       43

Как передать ссылку из React.forwardRef в клонированный элемент?

0 голосов
/ 13 марта 2020

Вот что я пытаюсь сделать.

Я использую всплывающую подсказку Material UI, которую оборачиваю вокруг клонированного дочернего элемента в моем компоненте. Чтобы получить всплывающую подсказку, мне сказали переслать ссылку, , как показано здесь в документах .

Так что мой код в конечном итоге выглядит следующим образом: 

const Child = forwardRef((props, ref) => (
  <div {...props} ref={ref}>{cloneElement(children, {disabled: true})}</div>
))

return (
  <Tooltip title="Displaying Tooltip"}>
    <Child/>
  </Tooltip>
)

Как вы можете видеть, я хочу прикрепить отключенный к подпоркам ребенка, поэтому мне нужен clonedElement здесь.

Что происходит, хотя я теряю некоторые стили для моего ребенка, потому что я обертываю его в <div> в частности, ширина дочернего элемента.

Можно ли передать ref из функции рендеринга forwardRef непосредственно в клон?

Я попытался это сделать, но это не сработало: 

const Component = forwardRef((props, ref) => (
  cloneElement(children, {...props, ref, disabled: true})
))

Ищите другую пару глаз, чтобы помочь в этом. Заранее спасибо!

...