Was ist eine Unterkomponente in React?

In React wird ein bestimmter Codeabschnitt in eine Komponente gekapselt und diese Komponente wird in eine andere Komponente eingeführt. Dann wird die Datei, die die gekapselte Komponente einführt, als übergeordnete Komponente bezeichnet, und die importierte Komponente wird als untergeordnete Komponente bezeichnet.

Die Betriebsumgebung dieses Artikels: Windows 10-System, React16, Thinkpad T480-Computer.

Empfohlen: „React-Video-Tutorial“

Manchmal können wir oft nicht unterscheiden, was eine übergeordnete Komponente und was eine untergeordnete Komponente ist. Lassen Sie uns nun kurz sprechen: Wir kapseln einen bestimmten Codeabschnitt in eine Komponente, und diese Komponente wird in eine andere Komponente eingeführt. Die Datei, die die gekapselte Komponente einführt, wird als übergeordnete Komponente bezeichnet, und die eingeführte Komponente wird als untergeordnete Komponente bezeichnet.

Rufen Sie direkt die Methode der Unterkomponente in React auf (keine Props-Methode)

Wir alle wissen, dass wir in React normalerweise eine Methode in der übergeordneten Komponente definieren, wenn wir die Methode der Unterkomponente in der übergeordneten Komponente aufrufen möchten Komponente als Requisiten Übertragen Sie es an die Unterkomponente und führen Sie dann die Methode aus, um die von der Unterkomponente zurückgegebenen Parameter abzurufen und unseren Zweck zu erreichen.

Natürlich muss diese Ausführung aktiv ausgelöst werden.

Gibt es eine Möglichkeit, die Methode in der untergeordneten Komponente zu definieren und direkt in der übergeordneten Komponente aufzurufen?

Die Antwort ist ja.

Up-Code

import React, {Component} from "react";
import { Button } from "antd";
//父组件
export default class Parent extends Component {
    render() {
        return(
            <div>
　　　　　　　　　 <p>这是父组件</p>
                <Child triggerRef={this.bindRef} />
                <Button type="primary" onClick={this.btnClick} >click</Button>
            </div>
        )
    }
    bindRef = ref => { this.child = ref }
    btnClick = () => {
        this.child.getValuefromChild()
    }
}
//子组件
class Child extends Component {
    componentDidMount(){
        this.props.triggerRef(this)
    }
　　//这是子组件的方法
    getValuefromChild = () => console.log("this is child value.")
    render() {
        return <div>这是子组件</div>
    }
}

Das obige ist der detaillierte Inhalt vonWas ist eine Unterkomponente in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!