Estoy tratando de acceder a un método de componente usando createRef() sin embargo, TypeError: modalRef.current is null error back.
Nunca usé referencias antes, así que si es una guía incorrecta, cómo lograr lo que estoy tratando de hacer.
este es mi intento
const parent = () => { const modalRef = createRef(); const onBtnClick = () => { modalRef.current.upadeState(); } return( <div> <button onclick={onBtnClick}>bro</button> <Modal ref={modalRef} /> </div> ) }Modal
export default Modal = () => { const upadeState = () => { console.log('It works fam'); } return( <div> bro we here </div> ) }Para llamar al método del componente secundario desde el componente principal en los ganchos, estamos usando los ganchos React.forwardRef y React.useImperativeHandle de React.
Aquí hay un ejemplo para llamar al método hijo.
Niño.js
import React from "react"; const { forwardRef, useState, useImperativeHandle } = React; // We need to wrap component in `forwardRef` in order to gain // access to the ref object that is assigned using the `ref` prop. // This ref is passed as the second parameter to the function component. const Child = forwardRef((props, ref) => { const [state, setState] = useState(0); const getAlert = () => { alert("getAlert from Child"); setState(state => state + 1) }; // The component instance will be extended // with whatever you return from the callback passed // as the second argument useImperativeHandle(ref, () => ({ getAlert, })); return ( <> <h1>Count {state}</h1> <button onClick={() => getAlert()}>Click Child</button> <br /> </> ); });Padre.js
import React from "react"; const { useRef } = React; export const Parent = () => { // In order to gain access to the child component instance, // you need to assign it to a `ref`, so we call `useRef()` to get one const childRef = useRef(); return ( <div> <Child ref={childRef} /> <button onClick={() => childRef.current.getAlert()}>Click Parent</button> </div> ); }; El componente secundario se procesa y se crea una referencia usando React.useRef llamado childRef. El botón que creamos en el componente principal ahora se usa para llamar a la función del componente secundario childRef.current.getAlert();