我正在开展一个更大的项目,但我创建了这个简短的例子来说明问题。
如果我使用Box
组件,它的工作原理。它在控制台componentWillEnter
中输出
我们点击按钮时componentWillLeave
。
如果我使用BoxContainer
容器,它就不再起作用了。 <{1}}和componentWillEnter
特殊生命周期挂钩不会被调用。
componentWillLeave
Webpack构建正确完成,控制台中没有错误,但它没有输出任何内容。
我还尝试使用高级API:{this.state.shouldShowBox && <BoxContainer/>}
,它适用于ReactCSSTransitionGroup
和Box
组件。但我需要使用低级API:BoxContainer
。
当我们使用ReactTransitionGroup
时,您是否知道它为什么不起作用?
react-redux
答案 0 :(得分:4)
这不应该起作用,因为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
答案 1 :(得分:1)
我们也尝试做同样的事情,将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
遇到任何问题,请告诉我。