Llame a la función secundaria desde el componente principal en React

1. Introducción a ref en React
2. Use ref para invocar la función secundaria de los componentes primarios en la clase
3. Use ganchos para invocar funciones secundarias desde padres en componentes funcionales

En este artículo, aprenderemos a llamar el método del componente secundario al componente principal en React.

En su mayoría, los desarrolladores necesitan llamar al método del componente principal desde el componente secundario, y podemos lograrlo pasando el método del componente principal como “accesorios” al componente secundario.

También podemos invertirlo. Y aquí, usaremos refs para llamar al método del componente secundario desde el principal.

Introducción a ref en React

En general, podemos interactuar con el componente secundario desde el componente principal pasando los accesorios al componente secundario. La ref nos permite interactuar con el componente fuera del típico flujo de datos padre e hijo.

Los usuarios pueden seguir la siguiente sintaxis para crear la ref.

this.newRef = React.createRef();

Después de crear la ref, los usuarios pueden asignarla como valor del atributo ref de cualquier elemento o componente HTML. Queremos asignarlo al atributo ref del componente Child.

<Child ref={this.newRef} />

Ahora, los usuarios pueden acceder a la instancia montada del componente secundario a través del atributo actual de newRef e invocar los métodos del componente secundario.

this.childRef.current.childMethod();

Entonces, de esta manera, ref es útil para interactuar con cualquier componente fuera del flujo de datos típico.

Use ref para invocar la función secundaria de los componentes primarios en la clase

En el siguiente ejemplo, hemos creado dos componentes, la Aplicación (principal) y el Niño. En el componente Child, hemos agregado algo de HTML para renderizar y childMethod(), que mostrará un cuadro de alerta cuando se invoque.

En el componente App, hemos creado la ref en el constructor y hemos asignado su valor al atributo ref del componente Child.

Cuando un usuario hace clic en el botón hacer clic, invocará el método callChild(). El método callChild() accede e invoca el childMethod() a través del atributo actual de ref.

Código de ejemplo:

//  import required libraries
import React from "react";
import Child from "./Child";

export default class APP extends React.Component {
  constructor(props) {
    super(props);
    // Initializing the Refs
    this.childRef = React.createRef();
  }
  //  call the child method
  callChild = () => {
    this.childRef.current.childMethod();
  };

  render() {
    return (
      <div>
        {/* Passing Ref to CHild component */}
        <Child ref={this.childRef} />
        <button onClick={this.callChild}>Click</button>
      </div>
    );
  }
}

import React from "react";
export default class Child extends React.Component {
    childMethod() {
        alert('Called the Method of Child.');
    }
    render() {
        return <h1>This is From Child Component.</h1>;
    }
}

Producción:

Use ganchos para invocar funciones secundarias desde padres en componentes funcionales

En el siguiente ejemplo, hemos creado los dos componentes de función, App y Child. Hemos envuelto el componente Child dentro de los ganchos forwardRef para acceder al componente Child dentro del componente principal usando el gancho useRef.

Además, hemos utilizado useImperativeHandle y hemos pasado ref como primer parámetro y una función de devolución de llamada como segundo parámetro. Aquí, el componente Niño extenderá cualquier función de devolución de llamada que devolverá.

Podemos acceder al valor devuelto desde la función de devolución de llamada en el componente principal a través del atributo actual del enlace useRef.

Código de ejemplo - (App.js):

//  import required libraries
import React, { useRef } from "react";
import Child from "./Child";

export default function APP() {
  // use hooks to create `ref`
  const childRef = useRef();
  // call child method
  const onClick = () => {
    childRef.current.childMethod();
  };
  return (
    <div>
      {/* Passing Ref to CHild component */}
      {/* use `refs` */}
      <Child ref={childRef} />
      <button onClick={onClick}>Click</button>
    </div>
  );
}

Código de ejemplo - (Child.js):

import React, { forwardRef, useImperativeHandle } from "react";
// While using the hooks, it is required to wrap the component inside the forwardRef to gain access to the ref object,
//, which we create using the `useref` hooks inside the parent component.
const Child = forwardRef((props, ref) => {
  // Extending the child component with the return value of the callback function passed as a second parameter of the useImperatuveHandle.
  useImperativeHandle(ref, () => ({
    childMethod() {
      alert("Called the Method of Child.");
    },
  }));

  return <h1>Use Refs in functional component.</h1>;
});
export default Child;

Producción:

Hemos aprendido a invocar la función hijo desde la función padre usando ref. Además, los usuarios pueden realizar cambios en el componente secundario a través del componente principal utilizando la ref.