React
Communication entre composants

Remarques

Composants parent à enfant

Que le cas le plus simple en réalité, très naturel dans le monde de la réaction et les chances sont - vous l'utilisez déjà.

Vous pouvez transmettre des accessoires aux composants enfants . Dans cet exemple, le message que nous transmettons au composant enfant, le nom du message est choisi arbitrairement, vous pouvez le nommer comme vous voulez.

import React from 'react';

class Parent extends React.Component {
    render() {
        const variable = 5;
        return (
            <div>
                <Child message="message for child" />
                <Child message={variable} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return <h1>{this.props.message}</h1>
    }
}

export default Parent;

Ici, le composant <Parent /> affiche deux composants <Child /> , en transmettant un message for child à l'intérieur du premier composant et 5 le second.

En résumé, vous avez un composant (parent) qui en rend un autre (enfant) et lui transmet des accessoires.

Composants enfant à parent

En renvoyant des données au parent, pour ce faire, nous transmettons simplement une fonction en tant que prop du composant parent au composant enfant et le composant enfant appelle cette fonction .

Dans cet exemple, nous allons modifier l'état Parent en transmettant une fonction au composant Child et en appelant cette fonction dans le composant Child.

import React from 'react';

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };

        this.outputEvent = this.outputEvent.bind(this);
    }
    outputEvent(event) {
        // the event context comes from the Child
        this.setState({ count: this.state.count++ });
    }

    render() {
        const variable = 5;
        return (
            <div>
                Count: { this.state.count }
                <Child clickHandler={this.outputEvent} />
            </div>
        );
    }
}

class Child extends React.Component {
    render() {
        return (
            <button onClick={this.props.clickHandler}>
                Add One More
            </button>
        );
    }
}

export default Parent;

Notez que la méthode outputEvent du outputEvent (qui modifie l'état parent) est appelée par l'événement onClick du bouton onClick .

Composants non liés

La seule façon si vos composants n'ont pas de relation parent-enfant (ou sont liés mais trop éloignés, comme un grand-petit-fils) est d'avoir un signal auquel un composant est abonné, et l'autre écrit.

Ce sont les 2 opérations de base de tout système d'événement: abonnez-vous / écoutez un événement à notifier et envoyez / déclenchez / publiez / envoyez un événement pour avertir ceux qui le souhaitent.

Il y a au moins 3 modèles pour faire cela. Vous pouvez trouver une comparaison ici .

Voici un bref résumé:

• Modèle 1: Emetteur / cible / répartiteur d'événement : les auditeurs doivent référencer la source pour s'abonner.

  • pour vous abonner: otherObject.addEventListener('click', () => { alert('click!'); });
  • à expédier: this.dispatchEvent('click');

• Pattern 2: Publish / Subscribe : vous n'avez pas besoin d'une référence spécifique à la source qui déclenche l'événement, il y a un objet global accessible partout qui gère tous les événements.

  • s'abonner: globalBroadcaster.subscribe('click', () => { alert('click!'); });
  • à envoyer: globalBroadcaster.publish('click');

• Pattern 3: Signals : similaire à Event Emitter / Target / Dispatcher mais vous n'utilisez aucune chaîne aléatoire ici. Chaque objet pouvant émettre des événements doit avoir une propriété spécifique portant ce nom. De cette façon, vous savez exactement quels événements un objet peut émettre.

  • pour vous abonner: otherObject.clicked.add( () => { alert('click'); });
  • à envoyer: this.clicked.dispatch();