我开始使用react.js,并对本教程有一个(希望)简单的问题: http://facebook.github.io/react/docs/tutorial.html
我想在 html 中与“CommentList”不同的位置呈现“CommentForm”
我尝试了以下方法:
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
关于javascript - React.js 在不同位置渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25773668/