Question

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

我想将“CommentForm”渲染到我的html中的不同位置而不是“CommentList”

我尝试了以下内容：

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

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

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

Answer 1

CommentBox是一种类型。当您使用JSX创建一个JSX标记时，如<CommentBox>，那么您将创建该类型的实例。这意味着CommentBox.handleCommentSubmit()是该类型的函数，它不会对该实例起作用。所以你需要做var box = <CommentBox data={data} />; box.handleCommentSubmit()但是......

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

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

你读过有关Facebook的Flux吗？这就是我上面描述的那种。试试RefluxJS：https://github.com/spoike/refluxjs

Answer 2

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

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

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

如@Rygu所述，事件总线可能适用于React的communication between components doc中建议的没有父子关系的组件。

react.js在不同位置呈现组件

2 个答案: