Как получить значение ref в компоненте высшего порядка?

Question

У меня есть компонент, где я передаю значение ref. Мне нужно получить переданное значение ref в компоненте высшего порядка. Вот пример кода: Компонент, завернутый в HO C:

import React from "react";
import HOC from './hoc';
const MeasuredInput = () => {
  const ref = React.createRef();
  return (
    <div>
      <button ref={ref}>Click me!</button>
    </div>
  )
};
export default HOC(MeasuredInput);

Компонент высшего порядка:

import React from "react";
const HigherOrderFunction = (OriginalComponent) => {
  function NewComponent(props) {
    const { forwardedRef } = props;
    return <OriginalComponent ref={forwardedRef} {...props} />;
  }
  return React.forwardRef((props, ref) => {
    return <NewComponent {...props} forwardedRef={ref} />;
  });
};

Заранее спасибо

Answer 1

Вам нужно создать ref в HO C и передать его, а не наоборот. Данные передаются вниз, и HO C оборачивает компонент.

import React from "react";
const HigherOrderFunction = (OriginalComponent) => {
  return function(props) {
    const ref = useRef();
    return <OriginalComponent ref={ref} {...props} />
  }
};

Исходный компонент:

import React from "react";
import HOC from './hoc';
const MeasuredInput = React.forwardRef((props, ref) => {
  return (
    <div>
      <button ref={ref}>Click me!</button>
    </div>
  )
});
export default HOC(MeasuredInput);