Wie Sie React forwardRef verwenden und was Sie beachten müssen

const A = React.forwardRef((props,ref)=><B {...props} ref={ref}/>)

const A = React.forwardRef((props, ref) => (
<div ref={ref}>
<B {...Requisiten} />
</div>
))

importiere React, { useRef } von „react“;
Inhalt aus „./content“ importieren;

const Home = () => {
  // Ein Ref-Objekt erstellen const connectRef = useRef(null);

  const handleFoucus = () => {
    const _ref = connectRef.current;
    _ref.fokus();
  };

  zurückkehren (
    <div>
        <button onClick={() => handleFoucus()}>
          Methode von DOM-Elementen in untergeordneten Komponenten verwenden</button>

        <Inhaltsref={connectRef} />
    </div>
  );
};

Standard-Homepage exportieren;

importiere React, { forwardRef } von 'react';

/**
 * Nach dem ForwardRef-Umbruch wird ref als zweiter Parameter verwendet, um das übergebene ref-Attribut zu empfangen * zB
 * <Inhalt count={count} user={user} ref={connectRef}>
 *
 * @param props - {Anzahl, Benutzer}
 * @param ref - Verbindungsreferenz
 * */
const Inhalt = (Eigenschaften, Referenz) => {
  zurückkehren (
    <div>
   	  {/* Binde den Ref an den übergebenen Ref ≈ ref={connectRef} */}
      <input type="Passwort" ref={ref} />
    </div>
  )
};

exportiere Standard-ForwardRef(Inhalt);

importiere React, { useRef } von „react“;
Inhalt aus „./content“ importieren;

const Home = () => {
  // Ein Ref-Objekt erstellen const connectRef = useRef(null);

  const handleAdd = () => {
    const _ref = connectRef.current;

    const { Anzahl } = _ref.state;
    _ref.setState({
      Anzahl: Anzahl + 1
    })
  };

  zurückkehren (
    <div>
        <button onClick={() => handleAdd()}>
          Eigenschaften und Methoden der Klassenkomponente in der untergeordneten Komponente verwenden</button>

        <Inhaltsref={connectRef} />
    </div>
  );
};

Standard-Homepage exportieren;

importiere React, { forwardRef } von 'react';
Header aus „./header“ importieren;
Footer aus „./footer“ importieren;

/**
 * Nach dem ForwardRef-Umbruch wird ref als zweiter Parameter verwendet, um das übergebene ref-Attribut zu empfangen * zB
 * <Inhalt count={count} user={user} ref={connectRef}>
 *
 * @param props - {Anzahl, Benutzer}
 * @param ref - Verbindungsreferenz
 * */
const Inhalt = (Eigenschaften, Referenz) => {
  zurückkehren (
    <div>
      {/* Binde den Ref an den übergebenen Ref ≈ ref={connectRef} */}
      <Header ref={ref} /> {/* Klassenkomponente*/}
		
      {/* <Footer ref={ref} /> Funktionskomponenten haben keine Instanzen, also connectRef.current: null */}
    </div>
  )
};

exportiere Standard-ForwardRef(Inhalt)

importiere React von „react“;

exportiere Standardklasse Header erweitert React.Component {
  Zustand = {
    Anzahl: 0
  };

  rendern() {
    zurückkehren (
      <div>
        {dieser.Zustand.Anzahl}
      </div>
    )
  }
};

/*
  Umgang mit Schiedsrichtern
  zB Hoc1(Hoc2(Inhalt))

  <Content ref={myRef} /> Der an Content gebundene Ref wird an Hoc1 gebunden und nicht an die erste Methode React.forwardRef weitergegeben ================

      Verwenden Sie React.forwardRef(), um den Verweis außerhalb von Hoc1 zu verarbeiten, und verwenden Sie Props, um den Verweis zu übergeben.
      0. Fügen Sie forwardRef außerhalb der Komponente höherer Ordnung ein, fangen Sie ref ab und erhalten Sie es, fügen Sie ein props (xxx={ref}) hinzu und erhalten Sie die reale Komponente über props.xxx1. Übergeben Sie ref={XXXX} bei Verwendung // Unterschied zur zweiten Methode2. Verwenden Sie den zweiten Parameter von forwardRef, um ref zu erhalten
      3. Fügen Sie eine neue Eigenschaft hinzu, um den Verweis nach unten weiterzuleiten, z. B. forwardedRef={ref}
      4. Binden Sie ref={props.forwardedRef} in die reale Komponente ein

      const Home = (Eigenschaften) => {
        const connectRef = useRef(null);

        zurückkehren (
          <div>
            <Inhaltsref={connectRef} />
          </div>
        );
      };

      // Umschlossene Komponente const Content = (props) => {
        zurückkehren (
          <div>
            <input type="Passwort" ref={props.forwardedRef} />
          </div>
        );
      };


      // Der zweite Eingabeparameter von forwardRef kann ref empfangen und ref in der äußeren Schicht von Hoc verarbeiten. Exportstandard React.forwardRef((props, ref) => {
        const Wrapper = React.memo(Inhalt); // Hoc

        // ForwardRef umschließt Wrapper
        // Der Verweis muss an die echte Komponente im Wrapper weitergegeben werden // Ein Props-Attribut im Wrapper hinzufügen und das Ref-Objekt als Props an die untergeordnete Komponente weitergeben return <Wrapper {...props} forwardedRef={ref} />;
      });

  Die zweite Methode ==========

  0. Verwenden Sie eine Requisite, um den Verweis zu speichern, wenn Sie
  1. Übergeben Sie xxx={ref} bei Verwendung // Unterschied zur ersten Methode 2. Binden Sie ref={props.xxx} in die reale Komponente ein

  const Home = (Eigenschaften) => {
    const connectRef = useRef(null);

    zurückkehren (
      <div>
        <Inhalt weitergeleitetRef={connectRef} />
      </div>
    );
  };

  // Definieren Sie eine Komponente höherer Ordnung export const Hoc = (WrappedComponent) => {
    Klasse Wrapper erweitert React.Component {
      rendern() {
        return <WrappedComponent {...props} />
      }
    }
  }

  // Umschlossene Komponente const Content = (props) => {
    zurückkehren (
      <div>
        <input type="Passwort" ref={props.forwardedRef} />
      </div>
    );
  };

  // Verpackungsprozess Export Standard Hoc(Content);

* */