Reactjs 反应&；反应路由器&；反应链组_Reactjs_React Router_Reactcsstransitiongroup

Reactjs 反应&；反应路由器&；反应链组

reactjs

Reactjs 反应&；反应路由器&；反应链组,reactjs,react-router,reactcsstransitiongroup,Reactjs,React Router,Reactcsstransitiongroup,我正在创建一个具有三种状态的简单应用程序，并将React的路由器与ReactCSSTransitiouGroup一起使用。ReactCSTransasitionGroup的默认行为很简单：单击链接“附加/前置新子项”后新的子级将获得“应用程序输入”和“应用程序输入活动”类老孩子获得“应用程序离开”和“应用程序离开活动”类超时后移除旧的子对象我想做的是改变这种行为，这样它就可以这样：单击链接后，将保持相同的状态。只需添加到旧的子类“app leave”和“app leave activ

我正在创建一个具有三种状态的简单应用程序，并将React的路由器与ReactCSSTransitiouGroup一起使用。ReactCSTransasitionGroup的默认行为很简单：

单击链接“附加/前置新子项”后

新的子级将获得“应用程序输入”和“应用程序输入活动”类

老孩子获得“应用程序离开”和“应用程序离开活动”类

超时后移除旧的子对象

我想做的是改变这种行为，这样它就可以这样：

单击链接后，将保持相同的状态。只需添加到旧的子类“app leave”和“app leave active”类

离开超时后，删除旧的子项，并使用“app enter”和“app enter active”类附加新的子项

输入超时后，删除它的类

有什么简单的方法可以做到这一点吗？谢谢

一个简单的解决方案是不使用传统链接。如果您可以使用

startTimeout（namedFunctionToSetLocation，200ms）启动超时

。我强烈建议你要节俭，使用标志来控制州的复杂性，否则会把你活活吃掉

更详细的信息：

当有人触发你的事件监听器时，首先设置一些状态来添加你的类“app leave”和“app leave active”。您可以在一个单独的函数中执行此操作，但要访问组件的

this

，以便它可以访问

this.state

，或者在渲染时传递状态

在该函数中，您还需要启动一个超时，这样您就可以在延迟后进行下一次更改。在这一点上生成一个ID或设置一个标志是值得的，这样您就可以在延迟之后检查在这段时间内是否没有其他任何事情开始（如果您对所有转换使用一个ID变量，并且每次新的转换开始时都进行更新，那么您应该有一个可靠的检查，在异步延迟之后，您是否仍然关心继续）

当超时被触发，并且你已经检查了你的标志，你可以手动触发你的路由器，或者设置一个新的位置，不管你喜欢什么

我发现，当ReactTransitionGroup不是完美匹配时，使用简单的定制方法非常有用。过渡组在ReactRouter v4上有细微的行为，如果您只需要一次延迟或简单的单击类更改，那么它完全没有必要

最后，您还可以在条件渲染块内使用普通的ReactRouter和ReactTransitionGroup组件（如我刚才所述）-不要放弃这种技术，这是React ee所能做到的。