React
Kommunikation zwischen Komponenten

Bemerkungen

Übergeordnete zu untergeordneten Komponenten

Dass der einfachste Fall in der React-Welt sehr natürlich ist und die Chancen stehen - Sie nutzen ihn bereits.

Sie können Requisiten an untergeordnete Komponenten übergeben . In diesem Beispiel message ist die Stütze , die wir an die untergeordnete Komponente überliefern , wird der Name Nachricht willkürlich gewählt, können Sie es nennen wie Sie wollen.

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 stellt die <Parent /> -Komponente zwei <Child /> -Komponenten dar, wobei die message for child in der ersten Komponente und 5 in der zweiten Komponente übergeben werden.

Zusammenfassend haben Sie eine Komponente (übergeordnete Komponente), die eine andere Komponente (untergeordnete Komponente) wiedergibt und einige Requisiten an sie übergibt.

Kind zu übergeordneten Komponenten

Wenn Sie Daten an das übergeordnete Element zurücksenden, übergeben wir dazu einfach eine Funktion von der übergeordneten Komponente an die untergeordnete Komponente , und die untergeordnete Komponente ruft diese Funktion auf .

In diesem Beispiel ändern wir den übergeordneten Status, indem Sie eine Funktion an die untergeordnete Komponente übergeben und diese Funktion innerhalb der untergeordneten Komponente aufrufen.

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;

Beachten Sie, dass die outputEvent Methode des Parent (die den Parent- outputEvent ändert) vom onClick Ereignis der Schaltfläche des onClick aufgerufen wird.

Nicht verwandte Komponenten

Die einzige Möglichkeit, wenn Ihre Komponenten keine Eltern-Kind-Beziehung haben (oder verwandt sind, aber zu weiter fortgeschritten sind, wie z. B. ein Grand-Grand-Sohn), besteht darin, ein Signal zu haben, das eine Komponente abonniert und in die andere geschrieben wird.

Dies sind die zwei Grundoperationen eines Ereignissystems: Abonnieren / Abhören eines Ereignisses, das benachrichtigt werden soll, und Senden / Auslösen / Veröffentlichen / Senden eines Ereignisses, um diejenigen zu benachrichtigen, die dies wünschen.

Dafür gibt es mindestens 3 Muster. Einen Vergleich finden Sie hier .

Hier ist eine kurze Zusammenfassung:

• Muster 1: Ereignissender / Ziel / Dispatcher : Die Zuhörer müssen auf die Quelle verweisen, um sie zu abonnieren.

  • Abonnieren: otherObject.addEventListener('click', () => { alert('click!'); });
  • zu versenden: this.dispatchEvent('click');

• Muster 2: Veröffentlichen / Abonnieren : Sie benötigen keinen bestimmten Verweis auf die Quelle, die das Ereignis auslöst. Es gibt ein globales Objekt, auf das alle Ereignisse zugreifen können.

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

• Muster 3: Signale : Ähnlich wie Event Emitter / Target / Dispatcher, aber Sie verwenden hier keine zufälligen Zeichenfolgen. Jedes Objekt, das Ereignisse ausgeben kann, muss eine bestimmte Eigenschaft mit diesem Namen haben. Auf diese Weise wissen Sie genau, welche Ereignisse ein Objekt ausgeben kann.

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