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

标签 javascript reactjs

我开始使用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/

相关文章:

javascript - 使用 onClick 事件从 Redux 存储中删除项目时出现问题

javascript - 使用js在数组中打印json值

javascript - 整页 jQuery slider

javascript - 正则表达式是一项昂贵的操作吗?至少看起来

javascript - Angular ionic 真实简单 Controller 不工作

reactjs - 使用 Gatsby 将 Rich-Text 组件中的 Markdown 转换为 HTML

javascript - 在 ES6 中将值存储在 Map 中的回调函数

javascript - 在 React.js 中使用正则表达式过滤数组?

javascript - 当 Eric Hynds 的带有 JQuery Multiselect UI 的选择框动态更新时自动选择第一个选项

javascript - 如何覆盖 django 管理模板以添加自定义 javascript?