Quelles sont les méthodes permettant à l'enfant de réagir pour communiquer avec le parent ?

Il existe deux manières pour les composants enfants de réagir de communiquer avec les composants parents : les fonctions de rappel et les mécanismes d'événements personnalisés ; mais parfois, l'utilisation d'événements personnalisés est évidemment trop compliquée, c'est pourquoi les fonctions de rappel sont généralement utilisées et le composant parent définit le fonction de rappel à l'avance et transmettez la fonction de rappel au composant enfant, et le composant enfant appelle la fonction de rappel pour communiquer avec le composant parent.

L'environnement d'exploitation de ce tutoriel : système Windows7, version React16, cette méthode convient à toutes les marques d'ordinateurs.

Le composant enfant React communique avec le composant parent

Dans React, le composant enfant communique avec le composant parent en utilisant deux méthodes :

1. Utiliser les fonctions de rappel : c'est la flexibilité et la commodité de JavaScript, vous permettant ainsi d'obtenir l'état d'exécution.

2. Utiliser un mécanisme d'événement personnalisé : cette méthode est plus polyvalente et largement utilisée. Lors de la conception d'un composant, envisager l'ajout d'un mécanisme d'événements peut souvent simplifier l'API du composant.

Mais parfois, utiliser des événements personnalisés est évidemment trop compliqué. Afin d'atteindre l'objectif, une méthode plus simple est généralement choisie.

Les composants enfants utilisent généralement des fonctions de rappel pour communiquer avec les composants parents. Le composant parent définit la fonction de rappel à l'avance et transmet la fonction de rappel au composant enfant. Le composant enfant appelle la fonction de rappel pour communiquer avec le composant parent. .

Fonction de rappel

Implémente la fonction de se cacher en cliquant sur le bouton Masquer le composant dans un composant enfant

List3.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
class List3 extends Component {    
static propTypes = {        
        hideConponent: PropTypes.func.isRequired,
    }
    render() {      
      return (            
          <div>
                哈哈,我是List3               
                 <button onClick={this.props.hideConponent}>隐藏List3组件</button>
            </div>
        );
    }
}
export default List3;

App.jsx

import React, { Component } from 'react';
import List3 from './components/List3';
export default class App extends Component {   
 constructor(...args) {        
 super(...args);        
     this.state = {           
      isShowList3: false,
        };
    }
    showConponent = () => {       
     this.setState({            
     isShowList3: true,
        });
    }
    
    hideConponent = () => {      
      this.setState({         
         isShowList3: false,
        });
    }
    
    render() {        
         return (           
             <div>
                <button onClick={this.showConponent}>显示Lists组件</button>
                {
                    this.state.isShowList3 ?<List3 hideConponent={this.hideConponent} />:null
                }            
             </div>
        );
    }
}

En regardant la méthode d'implémentation, vous pouvez constater qu'elle est la même que la méthode d'implémentation de la fonction de rappel traditionnelle et setState apparaît généralement par paire avec la fonction de rappel, car le rappel. La fonction consiste à convertir l'état interne. Tradition des fonctions ;

Pour plus de connaissances liées à la programmation, veuillez visiter : Apprentissage en programmation ! !

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!