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

时间:2016-05-07 18:20:55

标签: javascript reactjs react-redux

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

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

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

componentWillLeave

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

我还尝试使用高级API:{this.state.shouldShowBox && <BoxContainer/>} ,它适用于ReactCSSTransitionGroupBox组件。但我需要使用低级API:BoxContainer

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

使用的版本:

  • 反应: 15.0.2
  • redux: 3.5.2
  • react-redux: 4.4.5

代码:

react-redux

2 个答案:

答案 0 :(得分:4)

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

Redux的创造者Dan Abramov已就issue

这样说过
  

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

     

我建议你:

           

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

答案 1 :(得分:1)

我们也尝试做同样的事情,将TransitionGroupredux连接的组件挂钩,例如

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

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

我们也尝试自己包裹Layer

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

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

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

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