useImperativeHandle

Referencia

useImperativeHandle(ref, createHandle, dependencies?)

Llama a useImperativeHandle en el nivel superior de tu componente para personalizar el identificador ref que se expone:

Parámetros

• ref: La ref que recibiste como prop del componente MyInput.

• createHandle: Una función que no toma argumentos y devuelve el identificador ref que quieres exponer. El identificador ref que devuelve puede tener cualquier tipo. Por lo general, devolverá un objeto con lo métodos que quieres exponer.

• opcional dependencies: La lista de todos los valores reactivos a los que se hace referencia dentro del código de createHandle. Los valores reactivos incluye props, estados, y todas las variables y funciones declaradas directamente dentro del cuerpo de tu componente. Si tu linter es , va a verificar que cada valor reactivo esté correctamente especificado como una dependencia. La lista de dependencias deben tener un número constante de elementos y ser escritos en una sola linea como [dep1, dep2, dep3]. React comparará cada dependencia con su valor anterior usando el algoritmo de comparación . Si un nuevo renderizado resultara en un cambio a una dependencia, o si no especificaste las dependencias completamente, tu función createHandle se volverá a ejecutar, y el nuevo identificador recién creado será asignado a ref.

Devuelve

useImperativeHandle devuelve undefined.

Uso

Exponer un identificador ref personalizado al componente padre

Para exponer un nodo DOM al elemento padre, pasa la prop ref al nodo.

Con el código de arriba, Aun así, puedes exponer un valor personalizado en su lugar. Para personalizar el identificador expuesto, llama a useImperativeHandle en el nivel superior de tu componente:

Ten en cuenta que en el código de arriba, la ref ya no se pasa al <input>.

Por ejemplo, supongamos que no quieres exponer el nodo DOM entero de <input>, pero quieres exponer dos de sus métodos: focus y scrollIntoView. Para hacer esto, mantén el DOM real del navegador en una ref separada. Entonces usa useImperativeHandle para exponer un identificador solamente con los métodos que quieres que el componente padre llame:

Ahora, si el componente padre obtiene una ref a MyInput, podrá llamar a los métodos focus y scrollIntoView en él. Sin embargo, no va a tener acceso completo al nodo DOM de <input> de manera más profunda.

Exponer tus propios métodos imperativos

Los métodos que expones a través de un identificador imperativo no tienen que coincidir exactamente a los métodos del DOM. Por ejemplo, el componente Post en el ejemplo de abajo expone a scrollAndFocusAddComment por medio de un identificador imperativo. Esto le permite a la Página padre desplazar la lista de comentarios y enfocar el campo de entrada cuando haces click al botón.