Question

我目前正在学习反应，我遇到了从我的组件中提取状态的问题。

基本上我有一些组件包含表单和其他输入，我需要从业务逻辑中获取数据，我需要的数据与组件的状态相结合。根据我的理解，数据应该具有单向流，但我无法想到如何使数据流回我的业务逻辑。我可以创建一些调用各自的接口函数，但我觉得这会违反单向流程。

anyhelp以及一些例子将非常感谢！

Answer 1

您通常将回调从父组件传递给子组件作为道具。当状态在任何子组件中发生更改时，它会调用该回调并传递每个用例中适当的数据。你的＆＃34;控制器 - 视图＆＃34; （实现实际回调的根组件）然后根据当前状态执行您需要的任何业务逻辑，然后相应地更新其状态（导致从该组件重新呈现组件树）。阅读有关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} />
    }
});

Answer 2

在React中处理数据流的最佳方法是使用Flux模式。您需要一些时间来了解它是如何工作的，但随着项目的发展，它将使您的生活更加轻松。看一些Flux教程，例如这个（使用Alt flux实现）：https://reactjsnews.com/getting-started-with-flux/

反应应用程序中的数据流

2 个答案: