Я новичок в React, и я хотел бы задать стратегический вопрос о том, как лучше всего выполнить задачу, когда данные должны передаваться между одноуровневыми компонентами.

Сначала я опишу задачу:

Скажи, у меня есть несколько<select> компоненты, которые являются дочерними элементами одного родителя, который динамически передает поля выбора, составленные из массива. Каждый блок имеет в точности одинаковые доступные параметры в своем начальном состоянии, но как только пользователь выбирает конкретный параметр в одном блоке, он должен быть отключен как параметр во всех других полях, пока не будет выпущен.

Вот пример того же в (глупый) код. (Я используюreact-select как сокращение для создания полей выбора.)

В этом примере мне нужно отключить (т.е. установитьdisabled: true) опции «Это мой любимый» и «Это мой наименее любимый», когда пользователь выбирает их в одном поле выбора (и отпускает их, если пользователь отменяет их выбор).

var React = require('react');
var Select = require('react-select');



var AnForm = React.createClass({

    render: function(){


        // this.props.fruits is an array passed in that looks like:
        // ['apples', 'bananas', 'cherries','watermelon','oranges']
        var selects = this.props.fruits.map(function(fruit, i) {

            var options = [
                { value: 'first', label: 'It\'s my favorite', disabled: false },
                { value: 'second', label: 'I\'m OK with it', disabled: false },
                { value: 'third', label: 'It\'s my least favorite', disabled: false }
            ];


            return (
                <Child fruit={fruit} key={i} options={options} />
            );
        });


        return (
            <div id="myFormThingy">
                {fruitSelects}
            </div>
        )
    }

});


var AnChild = React.createClass({

    getInitialState: function() {
        return {
            value:'',
            options: this.props.options
        };
    },

    render: function(){

        function changeValue(value){
            this.setState({value:value});
        }


        return (
            <label for={this.props.fruit}>{this.props.fruit}</label>
            <Select
                name={this.props.fruit}
                value={this.state.value}
                options={this.state.options}
                onChange={changeValue.bind(this)}
                placeholder="Choose one"
            />
        )
    }
});

Является ли обновление дочерних опций лучше всего путем передачи данных обратно родителю через обратный вызов? Должен ли я использовать ссылки для доступа к дочерним компонентам в этом обратном вызове? Помогает ли редуктор?

Я прошу прощения за общую природу вопроса, но я не нахожу много указаний о том, как справляться с этими взаимодействиями между братьями и сестрами однонаправленным образом.

Спасибо за любую помощь.