[英]data flow in react application
我目前正在学习反应,并且遇到了从组件中精心提取状态的问题。
基本上,我有一些组件,这些组件包含表单和其他输入,我需要这些数据和我的业务逻辑中的数据,我需要的数据与组件的状态耦合在一起。 据我了解,数据应该具有单向流,但我想不出如何使数据流回到业务逻辑。 我可以制作一些调用各自函数的接口函数,但是我认为这会违反单向流程。
有一些例子的任何帮助将不胜感激!
通常,您将回调从父组件传递到子组件作为道具。 当状态在任何子组件中更改时,它将调用该回调并传递每种用例中适当的任何数据。 然后,“ 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} />
}
});
在React中使用数据流的最好方法是使用Flux模式。 您需要一些时间来了解它的工作原理,但是随着项目的发展,它将使您的生活变得更加轻松。 请看一些Flux教程,例如本教程(使用Alt流量实现): https : //reactjsnews.com/getting-started-with-flux/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.