使用react-router我正在寻找一种更新页面URL/hash的方法,而不需要路由器重新呈现整个页面.
我正在开发一个完整的页面轮播,并希望每张幻灯片都有自己的URL(允许用户刷新页面并返回正确的幻灯片).旋转木马稍后会有类似于此演示的滑动,这意味着下一张幻灯片已预先渲染.
这里有我的旋转木马的精简版.
当前的幻灯片更改如下所示:
onClickLeft: function() {
this.setState({
selected: this.state.selected - 1
});
}
这工作正常,没有URL更新.我真正想要的是:
mixin: [Navigation],
onClickLeft: function() {
this.transitionTo('carousel-slide', {num: this.state.selected + 1});
}
这将设置当前幻灯片的支柱,允许旋转木马动画.但是,现在使用此方法会导致页面重新呈现,并且不显示任何动画.
我已经看到ReactCSSTransitionGroup用于路由转换,但是这似乎是为了渲染一个新页面并转换出旧页面.
如果已经有办法实现我正在寻找的东西,而我却错过了,有人能指出我正确的方向吗？
有一段时间,我一直在讨论如何在Redux中使用服务器交互(通过ajax)实现undo/redo .
我已经提出了一个使用命令模式的解决方案,其中操作使用execute和undo方法作为命令注册,而不是调度操作您调度命令.然后将命令存储在堆栈中并在需要时引发新操作.
我当前的实现使用中间件拦截调度,测试命令和调用Command的方法,看起来像这样:
let commands = [];
function undoMiddleware({ dispatch, getState }) {
return function (next) {
return function (action) {
if (action instanceof Command) {
// Execute the command
const promise = action.execute(action.value);
commands.push(action);
return promise(dispatch, getState);
} else {
if (action.type === UNDO) {
// Call the previous commands undo method
const command = commands.pop();
const promise = command.undo(command.value);
return promise(dispatch, getState);
} else {
return next(action); …在我的应用程序中,我正在使用React和Reflux,并对我的数据进行分层设置.我正在尝试将我的应用程序的元素分解为单独的商店,以便能够正确地挂钩事件并分离问题.
我有以下数据流:
Workspaces -> Placeholders -> Elements
在此方案中,创建工作空间时,必须依次使用对新创建的工作空间的引用(ID)创建默认占位符.这同样适用于占位符与元素关系.
Reflux方式似乎表明PlaceholderStore会从WorkspaceStore中侦听触发器,并将新创建的ID添加到this.trigger().
Reflux只允许从商店触发单个事件; 从而防止外部组件能够辨别create或update动作.这意味着如果商店中的一个触发器发送ID argument[0],则后续触发器应该执行相同的操作(以保持一致).对于寻找多个工作空间更新的组件(例如重新排序/批量更新),这是一个问题.
我曾想过要加上一个概念StoreActions; 只有商店可以创建的操作,然后其他商店才会收听(有效地从商店中丢弃原始触发器).通过这些组件/商店可以监听特定事件,并且可以毫无顾虑地定制传递给所述事件的参数.这似乎是一种错误的方式去滥用Reflux事件系统.
我应该尝试分解相关数据吗？是否有更好的方法来构建数据？
我已经阅读了关于聚合商店的信息,但没有看到任何解剖的实现.这些是通过将来自多个商店的数据放在一起提供解决方案吗？如果是,那么负责创建React组件可以收听的事件的是什么？
非常感谢任何人提供的任何帮助/见解!
我正在学习React并使用React-router.我正在构建的应用程序是一个移动风格的应用程序,顶部导航菜单和下面的内容部分.当我浏览应用页面时,我想在菜单栏中添加一个页面"标题",以确定您当前所在的页面.
我的路线:
<Routes>
<Route name='home' path='/' handler={HomePage}>
<Route name='product-list' path='products/' handler={ProductList}/>
<Route name='product-detail' path='product/:slug/' handler={ProductDetail} addHandlerKey={true}/>
</Route>
</Routes>
HomePage.render:
<div className="container">
<NavigationMenu />
<div className="contents">
{this.props.activeRouteHandler()}
</div>
</div>
NavigationMenu.render:
<div className="navigationMenu">
<div className="navigationMenuTitle>{this.props.title}</div>
</div>
到HomePage的子路由需要根据Ajax调用返回的内容设置其标题.
我原本想过为每条路线添加回调,将标题传递回父类,而父类又可以将这些数据传递给NavigationMenu.不幸的是,这不起作用:当您浏览页面时,重复调用的唯一函数是渲染,此处设置状态会引发Invariant Violation错误.
我已经在一个项目上实现了 Draft JS 作为一个简单的编辑器，但是我在设置无序列表的样式时遇到了麻烦，特别是更改项目符号的颜色以匹配文本颜色。
文档中似乎没有关于如何将样式应用于li包装unordered-list-item项目的信息。我可以选择文本并应用颜色，但这会产生如下所示的编辑器状态：
{
"entityMap": {},
"blocks": [
{
"key": "bcci",
"text": "Heading",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 0,
"length": 7,
"style": "red"
}
],
"entityRanges": []
},
{
"key": "28tv7",
"text": "One",
"type": "unordered-list-item",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 0,
"length": 3,
"style": "yellow"
}
],
"entityRanges": []
},
{
"key": "85hig",
"text": "Two",
"type": "unordered-list-item",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 0,
"length": 3,
"style": "red"
}
], …