React
Communicatie tussen componenten

Opmerkingen

Bovenliggende naar onderliggende componenten

Dat het eenvoudigste geval eigenlijk, heel natuurlijk in de React-wereld en de kansen zijn - je gebruikt het al.

Je kunt rekwisieten doorgeven aan onderliggende componenten . In dit voorbeeld message is de prop die we doorgeven aan het kind component, de naam bericht wordt willekeurig gekozen, kunt noem maar op alles wat je wilt.

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;

Hier geeft de component <Parent /> twee componenten <Child /> , waarbij een message for child wordt doorgegeven message for child in de eerste component en 5 in de tweede component.

Samenvattend, je hebt een component (ouder) die een andere (kind) weergeeft en enkele rekwisieten doorgeeft.

Onderliggende componenten

Gegevens terugsturen naar de ouder, om dit te doen geven we eenvoudig een functie als een prop door van de oudercomponent naar de onderliggende component , en de onderliggende component roept die functie aan .

In dit voorbeeld zullen we de ouderstatus wijzigen door een functie door te geven aan de component Kind en die functie in de component Kind aan te roepen.

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;

Merk op dat de outputEvent methode van de ouder (die de status van de ouder verandert) wordt opgeroepen door de knop Kind op de onClick .

Niet-gerelateerde componenten

De enige manier als uw componenten geen ouder-kindrelatie hebben (of verwant zijn maar te verder zoals een overgrootgrootzoon) is om een soort signaal te hebben waarop de ene component zich abonneert en de andere schrijft.

Dat zijn de 2 basisbewerkingen van elk gebeurtenissysteem: abonneer / luister naar een evenement om te melden en stuur / trigger / publiceer / verzend een evenement om degenen die dat willen te melden.

Er zijn minstens 3 patronen om dat te doen. U kunt hier een vergelijking vinden .

Hier is een korte samenvatting:

• Patroon 1: Event Emitter / Target / Dispatcher : de luisteraars moeten naar de bron verwijzen om zich te abonneren.

  • inschrijven: otherObject.addEventListener('click', () => { alert('click!'); });
  • om te verzenden: this.dispatchEvent('click');

• Patroon 2: Publiceren / Abonneren : u hebt geen specifieke verwijzing nodig naar de bron die de gebeurtenis activeert, er is overal een wereldwijd object beschikbaar dat alle gebeurtenissen afhandelt.

  • inschrijven: globalBroadcaster.subscribe('click', () => { alert('click!'); });
  • verzenden: globalBroadcaster.publish('click');

• Patroon 3: Signalen : vergelijkbaar met Event Emitter / Target / Dispatcher maar u gebruikt hier geen willekeurige strings. Elk object dat gebeurtenissen kan uitzenden, moet een specifieke eigenschap met die naam hebben. Op deze manier weet u precies welke gebeurtenissen een object kan uitzenden.

  • inschrijven: otherObject.clicked.add( () => { alert('click'); });
  • verzenden: this.clicked.dispatch();