поток данных в приложении React

В настоящее время я учусь реагировать, и я столкнулся с проблемой элегантного извлечения состояний из моих компонентов.

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

Мы будем очень благодарны anyhelp с некоторыми примерами!


reactjs javascript single-page-application flux
person user3021085    schedule 22.07.2015    source источник
comment
Возможный дубликат stackoverflow.com/ questions / 31555345 /   -  person Hannes Johansson    schedule 22.07.2015

Ответы (2)


arrow_upward
1
arrow_downward

Обычно вы передаете обратные вызовы от родительских компонентов дочерним компонентам в качестве свойств. Когда состояние любого из дочерних компонентов изменяется, он вызывает этот обратный вызов и передает любые данные, подходящие для каждого варианта использования. Ваш "контроллер-представление" (корневой компонент, реализующий фактический обратный вызов) затем выполняет любую нужную вам бизнес-логику на основе текущего состояния, а затем обновляет свое состояние соответствующим образом (вызывая повторный рендеринг дерева компонентов с этого компонента вниз). Прочтите документацию о взаимодействии компонентов.

Что-то вроде этого:

var Child = React.createClass({
    onTextChange: function() {
         var val = 13; // somehow calculate new value
         this.props.onTextChange(val);
    },
    render: function() {
        return <input type="text" value={this.props.val} onChange={this.onTextChange} />
    }
});

var Parent = React.createClass({
    onTextChange: function(val) {
         var newVal = someBusinessLogic(val);
         this.setState({val: newVal});
    },
    render: function() {
        return <Child onTextChange={this.onTextChange} val={this.state.val} />
    }
});
person Hannes Johansson    schedule 22.07.2015

arrow_upward
1
arrow_downward

Лучший способ работать с потоком данных в React - использовать шаблон Flux. Вам нужно время, чтобы понять, как это работает, но это значительно упростит вашу жизнь по мере роста вашего проекта. Посмотрите какой-нибудь учебник по Flux, например этот (с использованием реализации Alt flux): https://reactjsnews.com/getting-started-with-flux/

person const314    schedule 22.07.2015