Necesito llamar a métodos desde un componente secundario personalizado dentro del componente principal.
Pero, lamentablemente, la referencia al componente secundario (llamado CanvasUI) siempre es nula. No entiendo por qué ya que me parece que he implementado todo correctamente.
Este es mi componente principal
... export default function Home() { ... const canvas = useRef<CanvasRef>(null); ... function clearCanvas() { // canvas.current.resetCanvas(); console.log(canvas.current); } return ( <div className="flex justify-center items-center min-h-screen min-w-screen bg-main"> <div className="flex flex-col"> ... <div className="flex justify-center"> ... <CanvasUI disabled={disableCanvas} word={activeWord} ref={canvas} /> ... </div> ... <button onClick={() => clearCanvas()}>clear canvas</button> </div> </div> ); }Y este es el componente CanvasUI
... export default function CanvasUI({ disabled, word, ref, }: { disabled: boolean; word: string; ref: Ref<CanvasRef>; }) { ... useImperativeHandle(ref, () => ({ getCanvas, loadCanvas, resetCanvas })); ... function resetCanvas(): void { ... } ... function getCanvas(): String { ... } function loadCanvas(data: String, immediate: Boolean): void { ... } return ( ... ); }Interfaz CanvasRef
export default interface CanvasRef { getCanvas: () => String; loadCanvas: (data: String, immediate: Boolean) => void; resetCanvas: () => void; }Omití código sin importancia para hacerlo más legible
No puede usar ref como accesorio en un componente porque está reservado (al igual que key ). React omitirá el ref prop de props al invocar su componente de función.
En su lugar, debe colocar ref como el segundo parámetro de su componente CanvasUI y luego crearlo usando forwardRef . Esto se explica en la documentación de useImperativeHandle :
useImperativeManager
useImperativeHandle(ref, createHandle, [deps])
useImperativeHandlepersonaliza el valor de la instancia que se expone a los componentes principales cuando se usaref. Como siempre, en la mayoría de los casos se debe evitar el código imperativo que usa referencias.useImperativeHandledebe usarse conforwardRef:function FancyInput(props, ref) { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); } })); return <input ref={inputRef} ... />; } FancyInput = forwardRef(FancyInput);En este ejemplo, un componente principal que representa
<FancyInput ref={inputRef} />podría llamar ainputRef.current.focus().