como usar react refs entre componentes? React.forwardRef & props.innerRef

Compartir refs entre componentes padres e hijos es una técnica que se tiene que utilizar en algunas ocasiones. Para esto se puede utilizar refs as props o también React.forwardRef. Ambas opciones te permite cumplir el mismo objetivo de compartir refs entre componentes.

Debemos de identificar un punto importante que se ha mencionado antes en este canal. Esto es que no es posible obtener un ref de un componente funcional solamente de un componente o de un elemento. Debido a esto surge un caso en el que queremos accesar un ref de un elemento dentro de un componente funcional en lugar de la referencia al componente en si. Debido a esto se puede utilizar algúna de las técnicas que ya mencionamos refs as props o React.forwardRef.

props as refs tiene la característica de ser muy intuitivo pero le falta la capacidad de permitir un estándar en la utilización de refs como puede ser en el caso de usar HOC. Lo único que se requiere es pasar props que contengan las referencias y de esta manera otros componentes o elementos podrá usarlos sin problemas.

En el caso de React.forwardRef este permite seguir utilizando ref como estándar para definir una ref en elementos o componentes. Sin embargo tienen una estructura un poco especial ya que en su uso estas creando un componente.

=================================================
React Refs:
https://reactjs.org/docs/refs-and-the-dom.html

Forward Refs:
https://reactjs.org/docs/forwarding-refs.html

GITHUB LINK:
https://github.com/programax/react-refs