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

我开始使用react.js，对教程有一个（希望如此）简单的问题：

我想在html中的不同位置呈现“CommentForm”，而不是“CommentList”

我尝试了以下方法：

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

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

React.renderComponent(
,
document.getElementById（'comentBox'））
);
React.renderComponent(
,
document.getElementById（'commentForm'）
);

但这不起作用。 实现这一目标的最佳解决方案是什么？

---

谢谢

CommentBox

是一种类型。当您使用JSX创建一个JSX标记时，比如

，那么您正在创建该类型的实例。这意味着

CommentBox.handleCommentSubmit（）

是该类型上的函数，它在实例上不起作用。因此，您需要执行

var-box=；box.handleCommentSubmit（）

但是

解决两个独立组件之间通信的最佳方法是在它们之间放置回调管理器，类似于事件总线。在

CommentBox

中，您将开始使用该事件总线订阅/侦听事件，并且这些事件将使用相同的事件总线从

CommentForm

中调度

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

你读过Facebook的流量吗？这就是我上面描述的。尝试一下RefluxJS:

返回对组件的引用。为了使示例正常工作，请将该引用保留在变量中，并将其传递给

CommentForm

实例：

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

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

var commentBox=React.renderComponent(
,
document.getElementById（'commentBox'））
);
React.renderComponent(
,
document.getElementById（'commentForm'）
);

正如@Rygu所提到的，事件总线可能适用于没有React文档中建议的父子关系的组件