React應用程序中的數據流

Question

我目前正在學習反應，並且遇到了從組件中精心提取狀態的問題。

基本上，我有一些組件，這些組件包含表單和其他輸入，我需要這些數據和我的業務邏輯中的數據，我需要的數據與組件的狀態耦合在一起。 據我了解，數據應該具有單向流，但我想不出如何使數據流回到業務邏輯。 我可以制作一些調用各自函數的接口函數，但是我認為這會違反單向流程。

有一些例子的任何幫助將不勝感激！

Answer 1

通常，您將回調從父組件傳遞到子組件作為道具。 當狀態在任何子組件中更改時，它將調用該回調並傳遞每種用例中適當的任何數據。 然后，“ controller-view”（實現實際回調的根組件）會根據當前狀態執行您需要的任何業務邏輯，然后相應地更新其狀態（導致從該組件向下重新渲染組件樹）。 閱讀有關組件通信的文檔。

像這樣：

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} />
    }
});

Answer 2

在React中使用數據流的最好方法是使用Flux模式。 您需要一些時間來了解它的工作原理，但是隨着項目的發展，它將使您的生活變得更加輕松。 請看一些Flux教程，例如本教程（使用Alt流量實現）： https : //reactjsnews.com/getting-started-with-flux/