Есть компонент в котором создается несколько вложенных 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)?