Reactjs 子到父数据流

我是一个新的反应者，仍然在学习基础知识。在这里查看教程：

它解释了如何让父母对孩子身上的事件做出反应。以下是相关的代码：

var CommentBox = React.createClass({
  handleCommentSubmit: function(comment) {
    // TODO: submit to the server and refresh the list
  },
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm
          onCommentSubmit={this.handleCommentSubmit}
        />
      </div>
    );
  }
}

---

如果我理解正确，当

CommentForm.handleSubmit（）

尝试调用

this.props.onCommentSubmit（）

时，实例化

（没有任何属性）将创建一个断开的引用。父级必须执行

。这是React中进行子级到父级数据流的官方方式吗？还是有一种更松散耦合的方式？我想我希望有一些更类似于主干网的

trigger（）

和

on（）

函数的东西，其中一个视图可以更改它侦听的事件，而不必在其他视图中创建运行时错误。

这可能是React中组件之间最常见的数据传递形式。虽然它比基于事件的解决方案更紧密地耦合，但它也更显式（因为间接性更少），React主要关注于消除围绕数据流问题（在大型主干应用程序中可能是一个问题）的bug

可重用组件通常通过其属性提供API。例如，在

CommentForm

中，它将调用传递给

onCommentSubmit

的函数。组件可以通过使用使此API更显式。可以使用

.isRequired

声明必需的属性，而可选属性则不使用它。应在没有特定属性的情况下运行的组件应检查其处理程序中是否存在这些属性，例如：

var CommentForm=React.createClass({
handleSubmit:function（）{
if（this.props.onCommentSubmit）{
// ...
this.props.onCommentSubmit（…）；
}
},
}

---

正如在Node.js应用程序中传递回调是处理异步数据的最常见形式一样，将函数作为属性传递是React中父子组件通信的最低公分母，也是确保您构建的任何组件都能与其他人的代码一起工作的最佳方法。但是，正如Node甚至在React应用程序中，有很多方法可以用来有效地传递数据流。一种流行的体系结构在应用程序级别上提供了更大的灵活性，同时仍然保持清晰的单向数据流；另一种是使用事件总线（例如，with）.但是，请记住，是什么保证您会放弃，转而采用更灵活、松散耦合的体系结构。

谢谢，这正是我所希望的答案。

var CommentForm = React.createClass({
  handleSubmit: function() {
    var author = this.refs.author.getDOMNode().value.trim();
    var text = this.refs.text.getDOMNode().value.trim();
    this.props.onCommentSubmit({author: author, text: text});
    this.refs.author.getDOMNode().value = '';
    this.refs.text.getDOMNode().value = '';
    return false;
  },
}