我正在关注Chang Wang的教程,使用HOC和ReactTransitionGroup(第1 部分第2部分)与Huan Ji的页面转换教程(Link)一起制作可重复使用的React过渡.
我面临的问题是,React.cloneElement似乎没有将更新的道具传递给其中一个孩子,而其他孩子正确地接收更新的道具.
TransitionContainer.js
TransitionContainer是一个容器组件,类似于AppHuan Ji的教程.它为它的孩子注入一片状态.
这些孩子TransitionGroup都是HOC的一个实例Transition(代码进一步向下)
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
import {connect} from 'react-redux';
class TransitionContainer extends React.Component{
render(){
console.log(this.props.transitionState);
console.log("transitionContainer");
return(
<div>
<TransitionGroup>
{
React.Children.map(this.props.children,
(child) => React.cloneElement(child, //These children are all instances of the Transition HOC
{ key: child.props.route.path + "//" + child.type.displayName,
dispatch: this.props.dispatch,
transitionState: this.props.transitionState
}
)
)
}
</TransitionGroup>
</div>
)
} …Run Code Online (Sandbox Code Playgroud) animation reactjs react-router reactcsstransitiongroup redux