El componente principal del componente de alto orden de React llama al método del componente secundario

Los componentes de alto orden de React son una tecnología para reutilizar la lógica de los componentes. Los desarrolladores pueden mejorar la funcionalidad de un componente a través de HOC y devolverlo a la persona que llama. Dado que el componente de orden superior en sí no es un componente real, sino una función, no es posible llamar directamente al método del componente secundario.

Sin embargo, la función del componente principal que llama al método del componente secundario se puede realizar a través de la Ref.

Ganchos utilizados: useImperativeHandle(ref, createHandle, [deps])

Descripción de parámetros:

1.ref: el objeto de referencia que debe asignarse.

2.createHandle: el valor de retorno de la función createHandle se utiliza como valor de ref.current.

3.[deps]: matriz de dependencias. Si la dependencia cambia, la función createHandle se volverá a ejecutar.

La introducción de useImperativeHandle en el sitio web oficial de React también es relativamente breve. Para resumirlo en una oración: el componente secundario puede usar useImperativeHandle para permitir que el componente principal genere datos arbitrarios.

Los pasos de implementación específicos son los siguientes:

1. Defina una referencia en el subcomponente y exponga el método que debe llamarse mediante el gancho useImperativeHandle(), por ejemplo:

import React, { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const handleClick = () => {
    console.log('ChildComponent clicked!');
  };

  useImperativeHandle(ref, () => ({
    handleClick
  }));

  return (
    <button onClick={handleClick}>点击</button>
  );
});

export default ChildComponent;

En el código anterior, utilizamos el método React.forwardRef() para crear un subcomponente y luego definimos una función de controlador de eventos Ref y click handleClick() dentro del componente. A través del gancho useImperativeHandle(), exponemos el método handleClick para que lo utilice el componente principal.

2. Utilice Ref en el componente principal para obtener la instancia del componente secundario y llamar a su método, por ejemplo:

import React, { useRef } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const childRef = useRef(null);

  const handleButtonClick = () => {
    childRef.current.handleClick();
  };

  return (
    <div>
      <button onClick={handleButtonClick}>点击调用子组件方法</button>
      <ChildComponent ref={childRef} />
    </div>
  );
};

export default ParentComponent;

En el código anterior, primero usamos el método React.useRef() para crear un objeto Ref childRef, y luego definimos una función de controlador de eventos handleButtonClick() dentro del componente principal. Cuando se hace clic en el botón, llamamos al método handleClick() expuesto en el componente secundario a través de childRef.current.handleClick().

En resumen, al usar Ref para obtener la instancia del componente secundario y llamar a su método, el componente principal puede realizar la función de llamar al método del componente secundario.