React.js - Kommunikation zwischen gleichrangigen Komponenten

TLDR: ja, sollten Sie eine Requisiten-von-oben-nach-unten-und change-Handler-von-unten-nach-oben-Ansatz. Aber das kann sperrig in einer größeren Anwendung, so können Sie verwenden design patterns wie Flux oder Redux reduziert Ihre Komplexität.

Einfachen Ansatz Reagieren

Reagieren-Komponenten erhalten Ihre "inputs" als Requisiten; und Sie kommunizieren Ihre "output" durch den Aufruf von Funktionen, die übergeben wurden, um Sie als Requisiten. Eine kanonische Beispiel:

<input value={value} onChange={changeHandler}>

Passieren Sie den ersten Wert in einen prop; und eine änderung handler in einem anderen prop.

Wer kann die übergabe von Werten und ändern Handler eine Komponente? Nur Ihre Eltern. (Gut, es gibt eine Ausnahme: Sie können den Kontext zu teilen Informationen zwischen den Komponenten, aber das ist eine erweiterte Konzept, und wird genutzt werden, um im nächsten Beispiel.)

So, in jedem Fall, es ist die parent-Komponente der Ihren wählt, der sollte verwalten den input für Ihr auswählt. Hier ist ein Beispiel:

class Example extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            //keep track of what is selected in each select
            selected: [ null, null, null ] 
        };
    }

    changeValue(index, value) {
        //update selected option
        this.setState({ selected: this.state.selected.map((v, i) => i === index ? value : v)})
    }

    getOptionList(index) {
        //return a list of options, with anything selected in the other controls disabled
        return this.props.options.map(({value, label}) => {
            const selectedIndex = this.state.selected.indexOf(value);
            const disabled = selectedIndex >= 0 && selectedIndex !== index;
            return {value, label, disabled};
        });
    }

    render() {
        return (<div>
            <Select value={this.state.selected[0]} options={this.getOptionList(0)} onChange={v => this.changeValue(0, v)} />
            <Select value={this.state.selected[1]} options={this.getOptionList(1)} onChange={v => this.changeValue(1, v)} />
            <Select value={this.state.selected[2]} options={this.getOptionList(2)} onChange={v => this.changeValue(2, v)} />
        </div>)
    }

}

Redux

Der größte Nachteil des obigen Ansatzes ist, dass Sie haben, um an eine Menge von Informationen von oben nach unten, als Ihre Anwendung wächst, wird dies schwierig zu verwalten. Reagieren-Redux nutzt Reagieren die Kontext-Funktion zu aktivieren untergeordnete Komponenten zum Zugriff auf Ihren Shop direkt und vereinfachen damit Ihre Architektur.

Beispiel (um nur einige der wichtigsten Stücke Ihres redux-Anwendung - siehe reagieren-redux-Dokumentation, wie Draht diese zusammen, z.B. createStore, Provider...):

//reducer.js

//Your Store is made of two reducers:
//'dropdowns' manages the current state of your three dropdown;
//'options' manages the list of available options.

const dropdowns = (state = [null, null, null], action = {}) => {
    switch (action.type) {
        case 'CHANGE_DROPDOWN_VALUE':
            return state.map((v, i) => i === action.index ? action.value : v);
        default:
            return state;
    }
};

const options = (state = [], action = {}) => {
    //reducer code for option list omitted for sake of simplicity
};

//actionCreators.js

export const changeDropdownValue = (index, value) => ({
    type: 'CHANGE_DROPDOWN_VALUE',
    index,
    value
});

//helpers.js

export const selectOptionsForDropdown = (state, index) => {
    return state.options.map(({value, label}) => {
        const selectedIndex = state.dropdowns.indexOf(value);
        const disabled = selectedIndex >= 0 && selectedIndex !== index;
        return {value, label, disabled};
    });    
};

//components.js

import React from 'react';
import { connect } from 'react-redux';
import { changeDropdownValue } from './actionCreators';
import { selectOptionsForDropdown } from './helpers';
import { Select } from './myOtherComponents';

const mapStateToProps = (state, ownProps) => ({
    value: state.dropdowns[ownProps.index],
    options: selectOptionsForDropdown(state, ownProps.index)
}};

const mapDispatchToProps = (dispatch, ownProps) => ({
    onChange: value => dispatch(changeDropdownValue(ownProps.index, value));
});

const ConnectedSelect = connect(mapStateToProps, mapDispatchToProps)(Select);

export const Example = () => (
    <div>
        <ConnectedSelect index={0} />
        <ConnectedSelect index={1} />
        <ConnectedSelect index={2} />
    </div>
);

Wie Sie sehen können, die Logik in der Redux Beispiel ist die gleiche wie die Vanille Reagieren-code. Aber es ist nicht enthalten in der übergeordneten Komponente, aber in der Reduzier-und Hilfsfunktionen (Selektoren). Eine anstelle von top-down-Weitergabe von Requisiten, Reagieren-Redux verbindet jede einzelne Komponente an den Staat, wodurch ein einfacher, modularer, einfacher zu wartenden code.