Referencia

createRef()

Invoca a createRef para declarar una dentro de un

Parámetros

createRef no recibe parámetros.

Devuelve

createRef devuelve un objeto con una única propiedad:

  • current: Inicialmente, se inicializa en null. Posteriormente, se puede asignar a cualquier otra cosa. Si pasas el objeto ref a React como un atributo ref de un nodo JSX, React asignará su propiedad current.

Advertencias

  • createRef siempre devuelve un objeto diferente. Es equivalente a escribir { current: null } manualmente.
  • En un componente de función, probablemente querrás usar en su lugar, que siempre devuelve el mismo objeto.
  • const ref = useRef() es equivalente a const [ref, _] = useState(() => createRef(null)).

Uso

Declarar una referencia en un componente de clase

Para declarar una referencia ref dentro de un , invoca a createRef y asigna el resultado a un campo de clase:

Si ahora pasas ref={this.inputRef} a un <input> en tu JSX, React llenará this.inputRef.current con el nodo del DOM del input. Por ejemplo, así es como puedes crear un botón que enfoca el input:

Alternativas

Migrando de una clase con createRef a una función con useRef

Recomendamos utilizar componentes de función en lugar de en código nuevo. Si tienes componentes de clase existentes que utilizan createRef, así es cómo puedes convertirlos. Este es el código original:

Cuando reemplace las invocaciones de createRef con