React перенаправить ref наоборот

Есть компонент в котором создается несколько вложенных DOM узлов, к одному из которых прикреплен ref (прикреплен он не просто так и он должен остаться):

const Some = ({ ...props }) => {
  const barRef = useRef();

  useEffect(() => {
    if (barRef.current) {
      console.log(barRef.current);
    }
  }, [barRef]);

  return (
    <div className="foo" {...props}>
      <div className="bar" ref={barRef}>
        &npsp;
      </div>
    </div>
  );
};

Задача в том, чтобы когда мы прикрепляем ref к компоненту Some, отдавался именно barRef:

const Main = () => {
  const someRef = useRef();

  useEffect(() => {
    if (someRef.current) {
      console.log(someRef.current); // Тут должен быть barRef
    }
  }, [someRef]);

  return(<Some ref={someRef}/>);
};

Как мне это сделать без устаревшего callback refs (https://ru.reactjs.org/docs/refs-and-the-dom.html#callback-refs)?


Ответы (1 шт):

Автор решения: Алексей

Через перенаправление рефов

const Some = React.forwardRef((props, ref) => {
  return (
    <div className="foo" {...props}>
      <div className="bar" ref={ref}>
        &npsp;
      </div>
    </div>
  );
});
→ Ссылка