Tengo un componente padre e hijo que se ve así
export function Parent(){ function handleClick(){ // Here I need to access Child components ref, that may be taken to this function as a parameter } return( <> <h1> Parent component here </h1> <Child/> <button onClick={handleClick}>Get Ref</button> </> ) } export function Child(){ const childRef = useRef("test") return( <h1> Child Component</h1> ) }¿Cómo obtengo que se acceda a la referencia que se define dentro del componente secundario dentro del elemento principal en función del clic del botón en el componente principal?
Puede usar React.forwardRef para obtener la referencia secundaria en su componente principal.
export function Parent(){ const childRef = useRef(); function handleClick(){ console.log(childRef.current); } return( <> <h1> Parent component here </h1> <Child ref={childRef} /> <button onClick={handleClick}>Get Ref</button> </> ) } export default React.forwardRef((props, ref) => { return( <h1 ref={ref}>Child Component</h1> ) }); Alternativamente, si no le gusta usar React.forwardRef , también puede pasar la referencia como accesorio. Pero no puedes nombrarlo ref en este caso.
export function Parent(){ const childRef = useRef(); function handleClick(){ console.log(childRef.current); } return( <> <h1> Parent component here </h1> <Child innerRef={childRef} /> <button onClick={handleClick}>Get Ref</button> </> ) } export default function Child({ innerRef }) { return( <h1 ref={innerRef}>Child Component</h1> ) });¿Podrías intentarlo? Pasé la función como accesorios al niño y establecí la referencia allí cuando el niño lo representó;
export function Parent(){ function handleClick(value){ var childRef = value; } return( <> <h1> Parent component here </h1> <Child handleClick={handleClick}/> <button onClick={handleClick}>Get Ref</button> </> ) } export function Child({handleClick}){ const childRef = useRef("test") handleClick(childRef) return( <h1> Child Component</h1> ) }