El siguiente código pasa jsx de padre a hijo; El problema es que la referencia row.descBox no está definida, tal vez debido a que jsx en parent.js aún no se ejecuta; ¿Cómo debo hacer que apunte al elemento span ?
Esto es Parent.js
import { useEffect, useRef, useState } from "react"; import "./styles.css"; import Child from "./Child"; export default function Parent() { const taskRefs = useRef([]); const [cellContent, setCellContent] = useState([]); useEffect(() => { const cellContent = [ { content: ( <> <h1> <span ref={(el) => { taskRefs.current[0] = el; }} > inside span </span> </h1> </> ), descBox: taskRefs.current[0] } ]; setCellContent(cellContent); }, []); return <Child cellContent={cellContent} />; }Esto es Child.js
import { useEffect, useState } from "react"; import "./styles.css"; export const Child = ({ cellContent }) => { return ( <div className="App"> {cellContent.map((row, i) => { { console.log(row.descBox);//this is null! return <div key={i}>{row.content}</div>; } })} </div> ); }; export default Child;Prueba el código en codesandbox
La devolución de llamada para establecer la referencia dentro del jsx almacenado no se ejecutará hasta que el componente esté montado en el DOM y el inicio de sesión dentro del map() sea antes de que eso suceda (ni siquiera lo ha devuelto todavía). Deberá iniciar sesión en un useEffect para verlo configurado. Agregué llamadas de log a cada paso en el fragmento a continuación para ilustrar el orden.
Como nota al margen, no se puede establecer descBox en taskRefs.current[0] ya que luego se bloqueará como undefined . Deberá asignarle el objeto ref taskRefs o la matriz anidada asignada a taskRefs.current , ya que cualquiera de estos se actualizará por referencia cuando finalmente se establezca la referencia).
const { useState, useEffect, useRef } = React; function App() { const taskRefs = useRef([]); const [cellContent, setCellContent] = useState([]); useEffect(() => { const cellContent = [ { content: ( <span ref={(el) => { console.log("setting ref"); taskRefs.current[0] = el; }} > inside span </span> ), descBox: taskRefs } ]; setCellContent(cellContent); }, []); return <Child cellContent={cellContent} />; } function Child({ cellContent }) { useEffect(() => { if (cellContent.length) { console.log("inside useEffect. Ref:",cellContent[0].descBox.current[0]); } else { console.log('first render.'); } }); return ( <div className="App"> {cellContent.map((row, i) => { console.log("inside map. Ref:", row.descBox.current[0]); return <div key={i}>{row.content}</div>; })} </div> ); }; const container = document.getElementById('root'); const root = ReactDOM.createRoot(container); root.render(<App />); <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <div id='root'></div>