Реагирование: Ссылка на доступ, передаваемая между компонентами через реквизит рендера

Question

Я хотел бы получить доступ к ref, передаваемому между двумя внешними компонентами, с использованием реквизита рендеринга ( реальный пример ). Можно ли это сделать?

function Component() {
  // how to get access to `ref` here?

  return (
    <A>
      {({ref}) => (
        <B ref={ref}/>
      )}
    </A>
  )
}

Answer 1

Вам может понадобиться React.forwardRef

Пересылка ссылок - это метод автоматической передачи ссылки через компонент одному из его дочерних элементов.

Обычно это не требуется для большинства компонентов приложения. Однако это может быть полезно для некоторых типов компонентов, особенно в библиотеках компонентов многократного использования.

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

Answer 2

Разобрался. Свойство рендера ref на самом деле имеет неправильное название, это не ref, а функция для установки ссылки, поэтому мы можем просто использовать встроенную функцию (хотя это может вызвать дополнительные рендеры):

function Component() {
  const bRef = useRef(null);

  return (
    <A>
      {({ref: setRef}) => (
        <B ref={ref => {
          bRef.current = ref;
          setRef(ref);
        }}/>
      )}
    </A>
  )
}