React
Kommunikation mellan komponenter

Anmärkningar

Förälder till barnkomponenter

Att det enklaste fallet faktiskt, väldigt naturligt i React-världen och chanserna är - du använder redan det.

Du kan skicka rekvisita till barnkomponenter . I det här exemplet är message rekvisita som vi skickar till underordnade komponenten, namnet meddelande väljs godtyckligt, du kan namnge det du vill.

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;

Här ger <Parent /> -komponenten två <Child /> -komponenter, vilket skickar message for child i den första komponenten och 5 inuti den andra.

Sammanfattningsvis har du en komponent (förälder) som ger en annan (barn) och skickar till den några rekvisita.

Barn till föräldrakomponenter

Att skicka data tillbaka till föräldern, för att göra detta skickar vi helt enkelt en funktion som en rekvisita från föräldrakomponenten till barnkomponenten , och barnkomponenten kallar den funktionen .

I det här exemplet kommer vi att ändra föräldratillståndet genom att överföra en funktion till barnkomponenten och åberopa den funktionen inuti barnkomponenten.

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;

Observera att föräldrarnas outputEvent metod (som ändrar överordnade tillstånd) påkallas av onClick knappen onClick händelse.

Inte relaterade komponenter

Det enda sättet om dina komponenter inte har en förälder-barn-relation (eller är släkt, men för längre, till exempel en grand grand grand son) är att ha någon form av en signal som en komponent prenumererar på, och den andra skriver in.

Det är de två grundläggande operationerna i alla händelsessystem: prenumerera / lyssna på en händelse som ska meddelas och skicka / utlösa / publicera / skicka en händelse för att meddela de som vill.

Det finns minst tre mönster för att göra det. Du kan hitta en jämförelse här .

Här är en kort sammanfattning:

• Mönster 1: Event Emitter / Target / Dispatcher : lyssnarna måste referera till källan för att prenumerera.

  • att prenumerera: otherObject.addEventListener('click', () => { alert('click!'); });
  • att skicka: this.dispatchEvent('click');

• Mönster 2: Publicera / prenumerera : du behöver inte en specifik referens till källan som utlöser händelsen, det finns ett globalt objekt tillgängligt överallt som hanterar alla händelser.

  • att prenumerera: globalBroadcaster.subscribe('click', () => { alert('click!'); });
  • att skicka: globalBroadcaster.publish('click');

• Mönster 3: Signaler : liknar Event Emitter / Target / Dispatcher men du använder inga slumpmässiga strängar här. Varje objekt som kan avge händelser måste ha en specifik egenskap med det namnet. På det här sättet vet du exakt vilka händelser ett objekt kan avge.

  • att prenumerera på: otherObject.clicked.add( () => { alert('click'); });
  • att skicka: this.clicked.dispatch();