1

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

  1. 点击链接后追加/追加新的孩子
  2. 新孩子获得“app-enter”和“app-enter-active”课程
  3. 大孩子获得“app-leave”和“app-leave-active”课程
  4. 超时后删除老孩子

我想要做的是改变这种行为，使其表现得像这样：

  1. 点击链接后保持不变。只需添加到旧的子类“app-leave”和“app-leave-active”类。
  2. 离开超时后，删除旧孩子并使用“app-enter”和“app-enter-active”类附加新孩子。
  3. 输入超时后删除它的类

有什么简单的方法可以得到这个吗？谢谢！

4

1 回答 1

0

一个简单的解决方案是不使用传统链接。如果您添加自定义事件侦听器，您可以使用startTimeout(namedFunctionToSetLocation, 200ms). 我强烈建议节俭并使用标志来控制状态复杂性，否则会试图活活吃掉你。

更详细地说：

  1. 当有人触发你的事件监听器时，首先设置一些状态来添加你的类“app-leave”和“app-leave-active”。您可以在单独的函数中执行此操作，但请确保将该函数绑定到您的组件this，以便它可以访问this.state，或在渲染时传递状态。

  2. 在该函数中，您还希望启动超时，因此您可以在延迟后执行下一步更改。此时生成一个 ID 或设置一个标志是值得的，因此您可以在延迟之后检查在那段时间内没有其他任何事情开始（如果您对所有转换使用一个 ID 变量，并且每次新的转换开始时更新，你应该有一个坚如磐石的检查，在异步延迟之后，你是否仍然关心继续）。

  3. 当超时被触发并且您已经检查了您的标志时，您可以手动触发您的路由器，或者设置一个新的位置，但是您喜欢。

我发现当 ReactTransitionGroup 不适合时使用简单的定制方法很有用。过渡组在 ReactRouter v4 中具有细微的行为，如果您只需要延迟或单击时简单的类更改，则完全没有必要。

最后，您还可以在条件渲染块中使用普通的 ReactRouter 和 ReactTransitionGroup 组件（就像我刚刚描述的那样）——不要忽视这种技术，它就像 React-ee 一样。

于 2018-11-28T11:46:47.437 回答