communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Questions et réponses frontales > Que sont les composants parent-enfant en réaction

Que sont les composants parent-enfant en réaction

青灯夜游
Libérer： 2022-07-13 19:02:04
original
1960 Les gens l'ont consulté

Dans les appels mutuels entre les composants de réaction, l'appelant est appelé le composant parent et l'appelé est appelé le composant enfant. Les valeurs peuvent être transmises entre les composants parent et enfant : 1. Lorsqu'un composant parent transmet une valeur à un composant enfant, la valeur à transmettre est d'abord transmise au composant enfant, puis dans le composant enfant, les accessoires sont utilisés pour recevoir la valeur transmise par le composant parent ;2. Composant enfant Lorsque vous transmettez des valeurs au composant parent, vous devez les transmettre au composant parent via la méthode de déclenchement.

Que sont les composants parent-enfant en réaction

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

1. Composants dans React

Le composant React est une balise non-html auto-définie. Il est stipulé que la première lettre du composant React doit être en majuscule : 首字母大写：

class App extends Component{
}

<app></app>
Copier après la connexion

Que sont les composants parent-enfant en réaction

二、父子组件

组件的相互调用中，把调用者称为父组件，被调用者称为子组件：

import React from 'react';
import Children from './Children';

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    

    render(){
        console.log("render");
        return(
            <div>
                up
                <children></children>
            </div>
        )
    }
}

export default Up;
Copier après la connexion
import React from 'react';

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
            </div>
        )
    }
}

export default Children;
Copier après la connexion

三、父组件给子组件传值

父组件向子组件传值使用props。父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值。

父组件在调用子组件的时候定义一个属性：

<children></children>
Copier après la connexion

这个值msg会绑定在子组件的props

this.props.msg
Copier après la connexion
Que sont les composants parent-enfant en réaction

2. Dans l'appel mutuel de composants parent et enfant

composants, put L'appelant est appelé le composant parent, et l'appelé est appelé le composant enfant : 

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children msg="父组件传值给子组件" />
            </div>
        )
    }
}

export default Up;
Copier après la connexion
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                {this.props.msg}
            </div>
        )
    }
}

export default Children;
Copier après la connexion
Que sont les composants parent-enfant en réaction

3. transmet la valeur au composant enfant

Le composant parent transmet la valeur au composant enfant Les valeurs utilisent des accessoires. Lorsqu'un composant parent transmet une valeur à un composant enfant, la valeur à transmettre est d'abord transmise au composant enfant, puis dans le composant enfant, les accessoires sont utilisés pour recevoir la valeur transmise par le composant parent.

Le composant parent définit une propriété lors de l'appel du composant enfant : Que sont les composants parent-enfant en réaction

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    run = () => {
        console.log("父组件run方法");
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children run={this.run} />
            </div>
        )
    }
}

export default Up;
Copier après la connexion

Cette valeur msg sera liée à l'attribut props du composant enfant, et le composant enfant peut être utilisé directement :

import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }

    run = () => {
        this.props.run();
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;
Copier après la connexion
Le composant parent peut transmettre des valeurs et des méthodes au composant, et peut même se transmettre au composant enfant

3.1 Passer des valeursQue sont les composants parent-enfant en réaction

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    run = () => {
        console.log("父组件run方法");
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children msg={this}/>
            </div>
        )
    }
}

export default Up;
Copier après la connexion
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }

    run = () => {
        console.log(this.props.msg);
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={this.run}>Run</button>
            </div>
        )
    }
}

export default Children;
Copier après la connexion

3.2 Passer des méthodes

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    getChildrenData = (data) => {
        console.log(data);
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children upFun={this.getChildrenData}/>
            </div>
        )
    }
}

export default Up;
Copier après la connexion
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    
    render(){

        return (
            <div>
                Children
                <br />
                <button onClick={() => {this.props.upFun("子组件数据")}}>Run</button>
            </div>
        )
    }
}

export default Children;
Copier après la connexion
Que sont les composants parent-enfant en réaction

3.3 will Le composant parent transmet la valeur au composant enfant

import React from &#39;react&#39;;
import Children from &#39;./Children&#39;;

class Up extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            
        }

    }

    clickButton = () => {
        console.log(this.refs.children);
    }
    

    render(){
        console.log("render");
        return(
            <div>
                up
                <Children ref="children" msg="test"/>
                <button onClick={this.clickButton}>click</button>
            </div>
        )
    }
}

export default Up;
```
```js
import React from &#39;react&#39;;

class Children extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            title: "子组件"
        }
    }

    runChildren = () => {
        
    }
    
    render(){

        return (
            <div>
                Children
                <br />
            </div>
        )
    }
}

export default Children;
```
![Que sont les composants parent-enfant en réaction](https://img-blog.csdnimg.cn/20200722065137748.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xldGlhbnhm,size_16,color_FFFFFF,t_70)
Copier après la connexion
rrreee

🎜🎜4. Le composant enfant transmet la valeur au composant parent🎜🎜🎜Le composant enfant transmet la valeur au parent. composant via la méthode de déclenchement🎜rrreeerrreee🎜🎜🎜🎜🎜5. Le composant parent Obtenez les attributs et les méthodes des sous-composants via refs🎜🎜rrreee🎜[Recommandations associées : 🎜Tutoriel vidéo Redis🎜]🎜

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!

Étiquettes associées：
react 父子组件
source：php.cn
Article précédent：qu'est-ce que le rendu conditionnel de réaction Article suivant：Quelle est la différence entre l'ancien et le nouveau cycle de vie de React
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1361
Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ? Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...
Depuis 2024-04-06 21:28:37
0
1
2257
Sélectionnez les produits liés au woocommerce à l'aide d'une taxonomie personnalisée avec une hiérarchie à 3 niveaux J'ai une boutique woocommerce avec une classification personnalisée « Sports ». La classif...
Depuis 2024-04-06 20:05:30
0
1
544
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Problèmes rencontrés lors de l'utilisation d'opentbs pour générer des fichiers odt : les valeurs d'une même clé sont affichées dans la même ligne au lieu de colonnes séparées. J'utilise une bibliothèque appelée OpenTbs pour créer odt en utilisant PHP, je l'utilise c...
Depuis 2024-04-06 20:18:18
0
1
483
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal