Question

我正在开展一个更大的项目，但我创建了这个简短的例子来说明问题。

如果我使用Box组件，它的工作原理。它在控制台componentWillEnter中输出我们点击按钮时componentWillLeave。

如果我使用BoxContainer容器，它就不再起作用了。 <{1}}和componentWillEnter特殊生命周期挂钩不会被调用。

componentWillLeave

Webpack构建正确完成，控制台中没有错误，但它没有输出任何内容。

我还尝试使用高级API：{this.state.shouldShowBox && <BoxContainer/>}，它适用于ReactCSSTransitionGroup和Box组件。但我需要使用低级API：BoxContainer。

当我们使用ReactTransitionGroup时，您是否知道它为什么不起作用？

使用的版本：

反应： 15.0.2
redux： 3.5.2
react-redux： 4.4.5

代码：

react-redux

Answer 1

这不应该起作用，因为connect将你的组件包装成一个“连接”的对象，但是，有一些解决方法，如connect-with-transition-group

Redux的创造者Dan Abramov已就issue

这样说过

说实话，我不想硬编码支持   转换组到connect（）。这是一个非常具体的API   不会成为React动画API，更像是一个转义   孵化，直到有更好的解决方案。它调用实例的方式   嵌套实例上的方法与React概念不对齐   模型非常好。

我建议你：



如您所建议的那样在connect（）周围编写自己的包装



或者对动画使用更加反应友好的方法，例如https://github.com/chenglou/react-motion



或者像你建议的那样在connect（）周围编写自己的包装器   对动画使用更加反应友好的方法，例如   https://github.com/chenglou/react-motion

Answer 2

我们也尝试做同样的事情，将TransitionGroup与redux连接的组件挂钩，例如

<TransitionGroup>
  layerIds.map(id => ( <Layer ...>))
</TransitionGroup>

其中Layer本身是一个连接的redux组件。

我们也尝试自己包裹Layer

const WrappedLayer = (props) =>{
  return <TransitionGroup>
  <Layer {...props}/>
  </TransitionGroup>
}

使用WrappedLayer连接它，它只适用于componentWillAppear和componentDidAppear等安装阶段，无法在卸载阶段工作，因为当您在UI上删除图层时， TransitionGroup也会被删除，然后永远不会触发像componentWillLeave这样的生命周期方法。

好消息是我们终于找到了一个非常方便的库react-move https://github.com/react-tools/react-move，我们认为它优于react-motion，因为我们可以自定义持续时间，动画曲线和它非常干净。

希望这对您有帮助，如果您使用react-move遇到任何问题，请告诉我。

ReactTransitionGroup不能与React-redux连接组件一起使用

使用的版本：

代码：

2 个答案: