我目前正在学习 React,我遇到了从我的组件中优雅地提取状态的问题。
基本上我有一些组件,其中包含表单和其他输入,我需要从中获取业务逻辑中的数据,我需要的数据与组件的状态相结合。据我了解,数据应该具有单向流,但我想不出如何让我的数据流回我的业务逻辑。我可以只做一些调用各自的接口(interface)函数,但我觉得这会违反单向流。
如有任何帮助,我们将不胜感激!
最佳答案
您通常将回调作为 props 从父组件传递到子组件。当任何子组件的状态发生变化时,它会调用该回调并传递适合每个用例的任何数据。您的“ Controller View ”(实现实际回调的根组件)然后根据当前状态执行您需要的任何业务逻辑,然后相应地更新其状态(导致从该组件向下重新呈现组件树)。阅读有关 component communication 的文档.
像这样:
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} />
}
});
关于javascript - React应用程序中的数据流,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31566872/