javascript - react.js在不同位置渲染组件

我开始使用react.js，对本教程有一个（希望）简单的问题：
http://facebook.github.io/react/docs/tutorial.html

我想在HTML中的“ CommentForm”上显示不同的位置，而不是“ CommentList”。

我尝试了以下方法：

React.renderComponent(
   <CommentBox data={data} />,
    document.getElementById('comentBox')
);

React.renderComponent(
   <CommentForm onCommentSubmit={CommentBox.handleCommentSubmit} />,
    document.getElementById('commentForm')
);

但这是行不通的。
实现此目标的最佳解决方案是什么？
谢谢！

最佳答案

CommentBox是一种类型。当您使用JSX像<CommentBox>这样创建JSX标签时，您正在创建该类型的实例。这意味着CommentBox.handleCommentSubmit()是类型上的函数，并且不适用于实例。所以你需要做var box = <CommentBox data={data} />; box.handleCommentSubmit()但是...

解决两个分离的组件之间的通信的最佳方法是在它们之间放置一个回调管理器，类似于事件总线。在CommentBox内部，您将开始使用该事件总线订阅/监听事件，并且将使用同一事件总线从CommentForm内部调度这些事件。

关键是将回调逻辑放在组件内部，而不要尝试使用属性来传递它们。根React组件（renderComponent组件）的属性不应是回调。

您是否了解过Facebook的Flux？这是我上面描述的那种。尝试RefluxJS：https://github.com/spoike/refluxjs