在制作了简单的React示例页面后,我收到此错误:
未捕获错误:不变违规:_registerComponent(...):目标容器不是DOM元素.
这是我的代码:
/** @jsx React.DOM */
'use strict';
var React = require('react');
var App = React.createClass({
render() {
return <h1>Yo</h1>;
}
});
React.renderComponent(<App />, document.body);
Run Code Online (Sandbox Code Playgroud)
HTML:
<html>
<head>
<script src="/bundle.js"></script>
</head>
<body>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这是什么意思?
在bash中运行脚本时,我必须./在开头写:
$ ./manage.py syncdb
Run Code Online (Sandbox Code Playgroud)
如果我不这样做,我收到一条错误消息:
$ manage.py syncdb
-bash: manage.py: command not found
Run Code Online (Sandbox Code Playgroud)
这是什么原因?我认为.是当前文件夹的别名,因此这两个调用应该是等效的.
我也不明白为什么我./在运行应用程序时不需要,例如:
user:/home/user$ cd /usr/bin
user:/usr/bin$ git
Run Code Online (Sandbox Code Playgroud)
(没有运行./)
我正在构建一个需要在某些情况下显示确认对话框的应用程序.
假设我想删除一些东西,然后我会调度一个动作,deleteSomething(id)因此一些reducer会捕获该事件并填充对话框减速器以显示它.
当这个对话提交时,我怀疑了.
编辑:
使它更清楚:
deleteThingA(id) => show dialog with Questions => deleteThingARemotely(id)
createThingB(id) => Show dialog with Questions => createThingBRemotely(id)
Run Code Online (Sandbox Code Playgroud)
所以我正在尝试重用对话框组件.显示/隐藏对话框不是问题,因为这可以在reducer中轻松完成.我想要指定的是如何根据左侧开始流动的动作从右侧调度动作.
我要迁移到Redux.
我的应用程序包含很多部分(页面,组件),因此我想创建许多reducer.Redux示例显示我应该使用combineReducers()生成一个reducer.
另外据我所知,Redux应用程序应该有一个商店,并在应用程序启动后创建它.在创建商店时,我应该通过我的组合减速机.如果应用程序不是太大,这是有道理的.
但是,如果我构建多个JavaScript包怎么办?例如,每个应用程序页面都有自己的包.我认为在这种情况下,一个联合减速器并不好.我查看了Redux的来源,并找到了replaceReducer()功能.这似乎是我想要的.
replaceReducer()当我在应用程序的各个部分之间移动时,我可以为我的应用程序的每个部分创建组合的reducer .
这是一个好方法吗?
我正在阅读关于Flux但是示例Todo应用程序太简单了,我无法理解一些关键点.
想象一下像Facebook这样的单页应用程序,它具有用户个人资料页面.在每个用户个人资料页面上,我们希望显示一些用户信息及其最后的帖子,并带有无限滚动.我们可以从一个用户档案导航到另一个用户档案.
在Flux架构中,这将如何与商店和调度员相对应?
我们会为PostStore每个用户使用一个,还是会有某种全球商店?那么调度员呢,我们会为每个"用户页面"创建一个新的Dispatcher,还是我们会使用单例?最后,该架构的哪个部分负责管理"特定于页面"的商店的生命周期以响应路由变化?
此外,单个伪页面可以具有多个相同类型的数据列表.例如,个人资料页上,我想同时显示关注和跟随.UserStore在这种情况下,单身人士如何工作?将UserPageStore管理followedBy: UserStore和follows: UserStore?
我开始在Backbone项目中使用Facebook React,到目前为止它的表现非常好.
但是,我注意到我的React代码中出现了一些重复.
例如,我有几个类似于窗体的小部件,其状态为INITIAL,SENDING和SENT.按下按钮时,需要验证表单,发出请求,然后更新状态.this.state当然,状态保持在React内部,以及字段值.
如果这些是Backbone视图,我会提取一个被调用的基类,FormView但我的印象是React既不支持也不支持子类化来共享视图逻辑(如果我错了,请纠正我).
我在React中看到了两种代码重用方法:
我是否认为mixin和容器比React中的继承更受欢迎?这是一个刻意的设计决定吗? 将mixin或容器组件用于第二段中的"表单小部件"示例会更有意义吗?
这里有一个要点FeedbackWidget,并JoinWidget在其当前状态.它们具有类似的结构,类似的beginSend方法,并且都需要一些验证支持(还没有).
我正在重写我的应用程序以使用Flux,我在从商店检索数据时遇到问题.我有很多组件,它们很多.其中一些是大(Article),一些是小而简单(UserAvatar,UserLink).
我一直在努力应对组件层次结构中应该从Stores读取数据的地方.
我尝试了两种极端的方法,我都不喜欢这两种方法:
需要来自Store的某些数据的每个组件只接收实体ID并自行检索实体.
例如,Article传递articleId,UserAvatar并UserLink传递userId.
这种方法有几个明显的缺点(在代码示例下讨论).
var Article = React.createClass({
mixins: [createStoreMixin(ArticleStore)],
propTypes: {
articleId: PropTypes.number.isRequired
},
getStateFromStores() {
return {
article: ArticleStore.get(this.props.articleId);
}
},
render() {
var article = this.state.article,
userId = article.userId;
return (
<div>
<UserLink userId={userId}>
<UserAvatar userId={userId} />
</UserLink>
<h1>{article.title}</h1>
<p>{article.text}</p>
<p>Read more by <UserLink userId={userId} />.</p>
</div>
)
}
});
var UserAvatar = React.createClass({
mixins: [createStoreMixin(UserStore)],
propTypes: { …Run Code Online (Sandbox Code Playgroud) Redux应用程序中的初始状态可以通过两种方式设置:
如果您将初始状态传递到商店,那么如何从商店中读取该状态并将其作为减速器中的第一个参数?
我们有一个讲座和章节列表,用户可以在其中选择和取消选择它们.这两个列表存储在redux存储中.现在我们想要在url的hash标签中保留选定的讲座slugs和章节slugs的表示,并且对url的任何更改也应该更改存储(双向同步).
什么是使用react-router甚至react-router-redux的最佳解决方案?
我们无法找到一些很好的例子,其中react路由器仅用于维护url的hash标记,并且只更新一个组件.
谢谢!!!
javascript ×9
reactjs ×6
redux ×4
reactjs-flux ×2
architecture ×1
bash ×1
command-line ×1
dom ×1
facebook ×1
flux ×1
livereload ×1
mixins ×1
modal-dialog ×1
module ×1
react-redux ×1
react-router ×1
refactoring ×1
shell ×1
unix ×1
webpack ×1