Qu'est-ce qu'un sous-composant dans React ?

Dans React, un certain morceau de code est encapsulé dans un composant, et ce composant est introduit dans un autre composant. Ensuite, le fichier qui introduit le composant encapsulé est appelé le composant parent, et le composant importé est appelé le. composant enfant.

L'environnement d'exploitation de cet article : système Windows10, React16, ordinateur Thinkpad T480.

Recommandé : "Tutoriel vidéo React"

Parfois, nous ne pouvons souvent pas dire ce qu'est un composant parent et ce qu'est un composant enfant. Parlons maintenant brièvement : nous encapsulons un certain morceau de code dans un composant, et ce composant est introduit dans un autre composant. Le fichier qui introduit le composant encapsulé est appelé le composant parent, et le composant importé est appelé le composant enfant.

Appeler directement la méthode du sous-composant en réaction (méthode non-props)

Nous savons tous qu'en réaction, si vous souhaitez appeler la méthode du sous-composant dans le composant parent, nous définissons généralement une méthode dans le composant parent et la transférons au composant enfant en tant qu'accessoires, puis exécutons la méthode pour obtenir les paramètres renvoyés par le composant enfant pour atteindre notre objectif.

Évidemment, cette exécution doit être activement déclenchée.

Existe-t-il un moyen pour que la méthode soit définie dans le composant enfant et puisse être appelée directement dans le composant parent ?

La réponse est oui.

Code Up

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>
    }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!