En primer lugar, encontré la solución aquí, que funciona muy bien con una sola matriz de elementos. Pero mi pregunta es sobre las matrices anidadas de componentes. Por ejemplo:
const { useRef, useState, useEffect } = React; const arr1 = [A, B, C] const arr2 = [1, 2, 3] const App = () => { const popoverRefs = useRef([]); return ( <div> {arr1.map((parentItem, index) => { return( <div> A Parent Element {parentItem.label} {arr2.map((childItem, index2) => { return ( <div ref={????}> A Child Element {childItem.label} </div> ) })} </div> ) })} </div> ); }; ReactDOM.render( <App />, document.getElementById("root") ); En este ejemplo, ¿cómo puedo usar useRef o createRef para obtener la referencia para el hijo de cada padre por separado, de modo que pueda usar esas referencias para anclar otra vista, por ejemplo, una ventana emergente?
Hay muchas otras formas en que manejo el mismo caso usando el objeto
popoverRefs.current will look like { 0: [], 1: [], 2: [], }; const {useRef, useState, useEffect} = React; const arr1 = [A, B, C]; const arr2 = [1, 2, 3]; const App = () => { const popoverRefs = useRef( arr1.reduce((result, current, currentIndex) => { result[current] = []; return result; }, {}), ); return ( <div> {arr1.map((parentItem, index) => { return ( <div> A Parent Element {parentItem.label} {arr2.map((childItem, index2) => { return ( <div ref={ref => (popoverRefs.current[index][index2] = ref)}> A Child Element {childItem.label} </div> ); })} </div> ); })} </div> ); }; ReactDOM.render(<App />, document.getElementById('root'));Puede extraer el niño en un componente separado y crear la referencia allí.
const { useRef, useState } = React; const arr1 = ["A", "B", "C"]; const arr2 = [1, 2, 3]; const Child = ({ childItem }) => { const liRef = useRef(); const handleClick = () => { liRef.current.classList.toggle("highlight"); }; return ( <div ref={liRef}> A Child Element {childItem}{" "} <button onClick={handleClick}>Highlight</button> </div> ); }; const App = () => { return ( <div> {arr1.map((parentItem, index) => { return ( <div key={index}> <strong>A Parent Element {parentItem}</strong> {arr2.map((childItem, index2) => { return <Child childItem={childItem} key={index2}></Child>; })} </div> ); })} </div> ); }; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <App /> </React.StrictMode> ); .highlight { background: yellow; color: red; } <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="root"></div>