Wie kann ich untergeordnete Komponentenmethoden von einer übergeordneten Komponente in React aufrufen?

Untergeordnete Methoden aus der übergeordneten Komponente aufrufen

In React wird die Kommunikation zwischen Komponenten normalerweise durch Requisiten (Eigenschaften) und Ereignisse erreicht, aber das ist auch der Fall Es ist möglich, mithilfe von Referenzen auf untergeordnete Komponentenmethoden aus der übergeordneten Komponente zuzugreifen und diese aufzurufen.

Methodenaufruf mit Refs

1. Untergeordnete Komponente in ForwardRef einschließen: Um auf die Instanz der untergeordneten Komponente zuzugreifen, wickeln Sie sie in ForwardRef ein. Dadurch kann React die Referenz als zweites Argument an die Komponente übergeben.
2. Referenz der untergeordneten Instanz initialisieren: Erstellen Sie in der übergeordneten Komponente eine Referenz mit useRef(). Dadurch wird der Verweis auf die Instanz der untergeordneten Komponente gespeichert.
3. Referenz dem Kind zuweisen: Übergeben Sie die Referenz mithilfe der Ref-Requisite an die untergeordnete Komponente. Dadurch wird die Instanz der untergeordneten Komponente der Referenz der übergeordneten Komponente zugewiesen.
4. Untergeordnete Methoden verfügbar machen: Verwenden Sie innerhalb der untergeordneten Komponente useImperativeHandle, um ein Objekt zurückzugeben, das die Methoden enthält, die Sie der übergeordneten Komponente verfügbar machen möchten.

Beispiel mit Hooks

const Child = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    getAlert() {
      alert("getAlert from Child");
    }
  }));

  return <h1>Hi</h1>;
});

const Parent = () => {
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click</button>
    </div>
  );
};

ReactDOM.render(<Parent />, document.getElementById('root'));

In diesem Beispiel ist getAlert() eine von der Child-Komponente bereitgestellte Methode, die von der Parent-Komponente aus aufgerufen werden kann, indem auf die aktuelle Eigenschaft der childRef zugegriffen wird. Beachten Sie, dass der Aufruf untergeordneter Methoden direkt von der übergeordneten Methode nicht empfohlen wird und zugunsten ordnungsgemäßer Kommunikationsmuster der Komponenten vermieden werden sollte.

Das obige ist der detaillierte Inhalt vonWie kann ich untergeordnete Komponentenmethoden von einer übergeordneten Komponente in React aufrufen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!