调试 React CSS 转换
Debugging React CSS Transitions
我经常在我的控制台中收到来自 React 的以下警告，这导致了一些无法解释的动画错误。
我检查了以下常见的嫌疑人：
<ReactCSSTransitionGroup> 元素的所有子元素都设置了 key 属性。- 所有
<ReactCSSTransitionGroup> 个元素都设置了 transitionName 个属性。
- 所有
transitionName 都具有适用的 .example-enter、.example-enter-active、.example-leave 和 .example-leave-active 类 设置，动画持续时间少于 5000 毫秒.
- 所有
ReactCSSTransitionGroup 个元素在修改它们的子元素之前被挂载。
有办法调试吗？我有一个相对较大的应用程序，React 并没有真正引导我去任何地方查看哪个 DOM 元素触发了警告，或者过渡名称是什么，或者基本上任何有用的东西。
更新：
TimeoutTransitionGroup 有更好的警告信息，像这样：
[更新]
从 React 0.14 开始，用于检测转换的错误浏览器行为已被手动指定超时所取代； .
[旧答案]
我不确定追踪哪些组件有问题的最佳方法，但目前（从 v0.13.2 开始）bugs in ReactTransitionGroup and bugs in browser implementations of the animationend/transitionend events that can cause this to happen on occasion. Take a look at issue #1326 for some helpful pointers, as well as an alternative implementation 您可以尝试（使用 setTimeout而不是过渡事件）。
现在 React v0.14 已经发布，CSSTransitionGroup 现在像 TimeoutTransitionGroup 一样接受超时。
Add-Ons: To improve reliability, CSSTransitionGroup will no longer listen to transition events. Instead, you should specify transition durations manually using props such as transitionEnterTimeout={500}.
我经常在我的控制台中收到来自 React 的以下警告，这导致了一些无法解释的动画错误。
我检查了以下常见的嫌疑人：
<ReactCSSTransitionGroup>元素的所有子元素都设置了key属性。- 所有
<ReactCSSTransitionGroup>个元素都设置了transitionName个属性。 - 所有
transitionName都具有适用的.example-enter、.example-enter-active、.example-leave和.example-leave-active类 设置，动画持续时间少于 5000 毫秒. - 所有
ReactCSSTransitionGroup个元素在修改它们的子元素之前被挂载。
有办法调试吗？我有一个相对较大的应用程序，React 并没有真正引导我去任何地方查看哪个 DOM 元素触发了警告，或者过渡名称是什么，或者基本上任何有用的东西。
更新：
TimeoutTransitionGroup 有更好的警告信息，像这样：
[更新]
从 React 0.14 开始，用于检测转换的错误浏览器行为已被手动指定超时所取代；
[旧答案]
我不确定追踪哪些组件有问题的最佳方法，但目前（从 v0.13.2 开始）bugs in ReactTransitionGroup and bugs in browser implementations of the animationend/transitionend events that can cause this to happen on occasion. Take a look at issue #1326 for some helpful pointers, as well as an alternative implementation 您可以尝试（使用 setTimeout而不是过渡事件）。
现在 React v0.14 已经发布，CSSTransitionGroup 现在像 TimeoutTransitionGroup 一样接受超时。
Add-Ons: To improve reliability, CSSTransitionGroup will no longer listen to transition events. Instead, you should specify transition durations manually using props such as transitionEnterTimeout={500}.