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

react.js render components at different locations

本文关键字：位置 组件 js react      更新时间：2023-09-26

我开始使用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创建一个带有它的JSX标记（如<CommentBox>）时，您就是在创建该类型的实例。这意味着CommentBox.handleCommentSubmit()是类型上的一个函数，它在实例上不起作用。所以你需要做var box = <CommentBox data={data} />; box.handleCommentSubmit()，但是。。。

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

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

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

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

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

正如@Rygu所提到的，事件总线可能适用于没有父子关系的组件，正如React在组件文档之间的通信中所建议的那样。

相关文章：