Estoy tratando de usar un IntersectionObserver.observe() en cada componente secundario de un componente principal, pero para eso necesito sus referencias.

Así es como se ve mi componente principal:

 // App component <Nav> <Section ref={useRef(null)} {/* other props */} /> <Section ref={useRef(null)} {/* other props */} /> <Section ref={useRef(null)} {/* other props */} /> <Section ref={useRef(null)} {/* other props */} /> </Nav>

Necesito el componente Nav para acceder a la referencia de cada componente de la Section . Creé el observador y obtuve todos los elementos secundarios en una lista:

 // Nav component const observer = new IntersectionObserver(observerCallback, options); const sectionList: ReactElement<SectionProps>[] = []; childrenToList(props.children, sectionList); return ( <> <nav className="nav"> {/* ... */} </nav> {sectionList} </> )

 // Section component const Section = React.forwardRef<HTMLDivElement, SectionProps>((props, ref) => { return ( <section ref={ref} {/* other attributes */}>{props.children}</section> ); });

Esto es lo que está haciendo la función childrenToList :

 function childrenToList(children: ReactNode, listToPush: any[]) { React.Children.forEach(children, (element) => { if (!React.isValidElement(element)) return; listToPush.push(element); }); }

Entonces necesito una forma de hacer algo así (no un código de trabajo real):

 sectionList.forEach((section) => {observer.observe(section.ref.current)})

El problema es que no pude encontrar una manera de acceder a la ref. Ya intenté tener la referencia como accesorio, pero decía que su valor es nulo, o si lo usé con una declaración if (como

 const ref = section.props.ref if (ref) { observer.observe(ref.current) }

) la página simplemente no se procesaría y permanecería en blanco.