React
Comunicazione tra componenti

Osservazioni

Componenti padre-figlio

Che il caso più semplice in realtà, molto naturale nel mondo di React e le possibilità sono - lo stai già usando.

Puoi passare gli oggetti di scena ai componenti del bambino . In questo message esempio è il sostegno che passiamo al componente figlio, il messaggio del nome è scelto arbitrariamente, puoi chiamarlo come vuoi.

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;

Qui, il componente <Parent /> esegue il rendering di due componenti <Child /> , passando il message for child all'interno del primo componente e 5 all'interno del secondo.

In sintesi, hai un componente (genitore) che ne restituisce un altro (figlio) e passa ad alcuni oggetti di scena.

Componenti figlio-figlio

Inviando i dati indietro al genitore, per fare ciò passiamo semplicemente una funzione come puntello dal componente padre al componente figlio , e il componente figlio chiama tale funzione .

In questo esempio, cambieremo lo stato Genitore passando una funzione al componente Bambino e invocando quella funzione all'interno del componente Bambino.

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;

Si noti che il metodo outputEvent del outputEvent (che modifica lo stato padre) viene richiamato dall'evento onClick del pulsante figlio.

Componenti non correlati

L'unico modo se i tuoi componenti non hanno una relazione genitore-figlio (o sono correlati ma troppo lontani come un grand-grand-son) deve avere qualche tipo di segnale a cui un componente si abbona e l'altro scrive dentro.

Queste sono le 2 operazioni di base di qualsiasi sistema di eventi: iscriviti / ascolta un evento da notificare e invia / attiva / pubblica / invia un evento per avvisare chi lo desidera.

Ci sono almeno 3 modelli per farlo. Puoi trovare un confronto qui .

Ecco un breve riassunto:

• Pattern 1: Event Emitter / Target / Dispatcher : gli ascoltatori devono fare riferimento alla fonte per iscriversi.

  • per iscriversi: otherObject.addEventListener('click', () => { alert('click!'); });
  • per la spedizione: this.dispatchEvent('click');

• Motivo 2: pubblicazione / sottoscrizione : non è necessario un riferimento specifico all'origine che attiva l'evento, esiste un oggetto globale accessibile ovunque che gestisce tutti gli eventi.

  • per iscriversi: globalBroadcaster.subscribe('click', () => { alert('click!'); });
  • per la spedizione: globalBroadcaster.publish('click');

• Modello 3: Segnali : simili a Emettitore di eventi / Target / Dispatcher ma non si usano stringhe casuali qui. Ogni oggetto che potrebbe emettere eventi deve avere una proprietà specifica con quel nome. In questo modo, sai esattamente quali eventi possono emettere un oggetto.

  • per iscriversi: otherObject.clicked.add( () => { alert('click'); });
  • spedire: this.clicked.dispatch();