React
Komunikacja między komponentami

Uwagi

Elementy nadrzędne do elementów podrzędnych

To najłatwiejszy przypadek, bardzo naturalny w świecie React i szanse są - już go używasz.

Możesz przekazywać rekwizyty do elementów potomnych . W tym przykładowym message jest rekwizyt, który przekazujemy do elementu potomnego, komunikat o nazwie jest wybierany dowolnie, możesz nazwać go jak chcesz.

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;

Tutaj komponent <Parent /> renderuje dwa komponenty <Child /> , przekazując message for child wewnątrz pierwszego komponentu i 5 w drugim komponencie.

Podsumowując, masz komponent (element nadrzędny), który renderuje inny (element podrzędny) i przekazuje do niego niektóre rekwizyty.

Elementy potomne nadrzędne

Wysyłając dane z powrotem do rodzica, w tym celu po prostu przekazujemy funkcję jako rekwizyt z komponentu nadrzędnego do komponentu potomnego , a komponent potomny wywołuje tę funkcję .

W tym przykładzie zmienimy stan Parent, przekazując funkcję do komponentu Child i wywołując tę funkcję w komponencie 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;

Zauważ, że metoda outputEvent nadrzędnego (zmieniająca stan obiektu nadrzędnego) jest wywoływana przez zdarzenie przycisku onClick zdarzeniuClick.

Niepowiązane komponenty

Jedynym sposobem, jeśli twoje komponenty nie mają relacji rodzic-dziecko (lub są powiązane, ale zbyt daleko, np. Prawnuczek) jest posiadanie jakiegoś sygnału, który subskrybuje jeden komponent, a drugi pisze.

Są to 2 podstawowe operacje każdego systemu zdarzeń: subskrybuj / nasłuchuj zdarzenia, aby otrzymać powiadomienie, i wyślij / uruchom / opublikuj / wyślij zdarzenie, aby powiadomić tych, którzy chcą.

Aby to zrobić, istnieją co najmniej 3 wzorce. Porównanie znajdziesz tutaj .

Oto krótkie podsumowanie:

• Wzór 1: Emiter / obiekt docelowy / dyspozytor : nasłuchujący muszą odwołać się do źródła, aby zasubskrybować.

  • subskrybować: otherObject.addEventListener('click', () => { alert('click!'); });
  • do wysyłki: this.dispatchEvent('click');

• Wzór 2: Publikuj / Subskrybuj : nie potrzebujesz konkretnego odniesienia do źródła, które wyzwala zdarzenie, wszędzie jest dostępny obiekt globalny, który obsługuje wszystkie zdarzenia.

  • subskrybować: globalBroadcaster.subscribe('click', () => { alert('click!'); });
  • do wysyłki: globalBroadcaster.publish('click');

• Wzór 3: Sygnały : podobny do Emitera / Celu / Dyspozytora zdarzeń, ale nie używasz tutaj żadnych losowych ciągów. Każdy obiekt, który mógłby emitować zdarzenia, musi mieć określoną właściwość o tej nazwie. W ten sposób dokładnie wiesz, jakie zdarzenia może emitować obiekt.

  • subskrybować: otherObject.clicked.add( () => { alert('click'); });
  • do wysyłki: this.clicked.dispatch();