So rufen Sie die Methode der untergeordneten Komponente in der übergeordneten React-Komponente auf

Aufrufmethode: 1. Aufrufe in Klassenkomponenten können mit React.createRef(), funktionaler Deklaration von ref oder props mit dem benutzerdefinierten onRef-Attribut implementiert werden. 2. Aufrufe in Funktionskomponenten und Hook-Komponenten können mit useImperativeHandle oder forwardRef throw implementiert werden ref, um dies zu erreichen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.

In React rufen wir häufig die Methode der übergeordneten Komponente in der untergeordneten Komponente auf, normalerweise mithilfe des Props-Callbacks. Manchmal ist es jedoch auch erforderlich, die Methode der untergeordneten Komponente in der übergeordneten Komponente aufzurufen, um eine hohe Kohäsion zu erreichen. Es gibt viele Methoden, wenden Sie sie nach Bedarf an.

In Klassenkomponenten

---

1, React.createRef()

• Vorteile: leicht verständlich, mit Referenz versehen.

• Nachteile: Unterkomponenten, die HOC verwenden, sind nicht verfügbar und können nicht auf echte Unterkomponenten verweisen

  Einige häufig verwendete Schreibmethoden, z. B. in @observer von mobx eingeschlossene Unterkomponenten, gelten beispielsweise nicht für diese Methode. 2. Funktionale Deklaration von Referenzen Das Gleiche, aber die Art und Weise, ref zu definieren, ist anders.

  import React, { Component } from 'react';
  
  class Sub extends Component {
    callback() {
      console.log('执行回调');
    }
    render() {
      return <div>子组件</div>;
    }
  }
  
  class Super extends Component {
    constructor(props) {
      super(props);
      this.sub = React.createRef();
    }
    handleOnClick() {
      this.sub.callback();
    }
    render() {
      return (
        <div>
          <Sub ref={this.sub}></Sub>
        </div>
      );
    }
  }

3. Verwenden Sie Requisiten, um das onRef-Attribut anzupassen

Vorteile: Wenn die Unterkomponente mit HOC verschachtelt ist, kann sie auch auf die reale Unterkomponente verweisen.

• Nachteile: Requisitenattribute müssen angepasst werden

• ...
  
  <Sub ref={ref => this.sub = ref}></Sub>
  
  ...

Funktionskomponente, Hook-Komponente

1, verwendenImperativeHandle

• Vorteile: 1. Die Schreibmethode ist einfach und leicht verständlich. 2. Wenn die Unterkomponente ein verschachteltes HOC hat, kann sie auch auf die echte Unterkomponente verweisen

Nachteile: 1. Requisitenattribute müssen angepasst werden 2. Sie müssen die exponierte Methode anpassen. Das Problem besteht jedoch darin, dass withRouter, connect, Form.create und andere Methoden keine Referenz auslösen können. Wenn Child selbst diese Methoden verschachteln muss, können sie grundsätzlich nicht zusammen verwendet werden. ForwardRef selbst wird auch zum Auslösen von Referenzen für untergeordnete Elemente wie Eingaben und anderen nativen Elementen verwendet. Es ist nicht zum Auslösen von Komponentenreferenzen geeignet, da die Verwendungsszenarien von Komponenten zu komplex sind.

import React, { Component } from 'react';
import { observer } from 'mobx-react'

@observer
class Sub extends Component {
	componentDidMount(){
    // 将子组件指向父组件的变量
		this.props.onRef && this.props.onRef(this);
	}
	callback(){
		console.log("执行我")
	}
	render(){
		return (<div>子组件</div>);
	}
}

class Super extends Component {
	handleOnClick(){
       // 可以调用子组件方法
		this.Sub.callback();
	}
	render(){
		return (
          <div>
			<div onClick={this.handleOnClick}>click</div>
			<Sub onRef={ node => this.Sub = node }></Sub>	
	   	  </div>)
	}
}

Zusammenfassung

Es gibt zwei Situationen, in denen eine übergeordnete Komponente eine Funktion einer untergeordneten Komponente aufruft.

---

Keine HOC-Verschachtelung von untergeordneten Komponenten: Es wird empfohlen, ref zum direkten Aufrufen zu verwenden.
Bei HOC-Verschachtelung: Es wird empfohlen, benutzerdefinierte zu verwenden Requisiten

• 【Verwandte Empfehlungen:
Redis-Video-Tutorial
• ,
Programmierunterricht

】

Das obige ist der detaillierte Inhalt vonSo rufen Sie die Methode der untergeordneten Komponente in der übergeordneten React-Komponente auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!