React TransitionGroup和React.cloneElement不会发送更新的道具(React TransitionGroup and React.cloneElement do not send updated props)

 我跟随Chang Wang的教程，将ReactTransitionGroup和ReactTransitionGroup （ ReactTransitionGroup （ 第1 部分第2部分 ）与Huan Ji的页面转换教程（ Link ）一起制作可重复使用的React转换。 
 
 我面临的问题是React.cloneElement似乎没有将更新的道具传递给其中的一个孩子，而其他孩子确实会收到更新的道具。 
 
 首先，一些代码： 
 
 TransitionContainer.js 
 
 TransitionContainer是一个容器组件，与Huan Ji的教程中的App类似。 它为其孩子注入了一片州的状态。 
 
 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>
    )
  }
}
export default connect((state)=>({transitionState:state.transitions}),(dispatch)=>({dispatch:dispatch}))(TransitionContainer)
 
 Transition.js 
 
 Transition与Chang Wang的HOC类似。 它需要一些选项，定义componentWillEnter + componentWillLeave钩子，并包装一个组件。 TransitionContainer （上面）将props.transitionState注入到此HOC中。 然而，即使状态改变，道具有时也不会更新（请参见下面的问题 ） 
 
import React from 'react';
import getDisplayName from 'react-display-name';
import merge from 'lodash/merge'
import classnames from 'classnames'
import * as actions from './actions/transitions'
export function transition(WrappedComponent, options) {
  return class Transition extends React.Component {
    static displayName = `Transition(${getDisplayName(WrappedComponent)})`;
    constructor(props) {
      super(props);
      this.state = {
          willLeave:false,
          willEnter:false,
          key: options.key
      };
    }
    componentWillMount(){
      this.props.dispatch(actions.registerComponent(this.state.key))
    }
    componentWillUnmount(){
      this.props.dispatch(actions.destroyComponent(this.state.key))
    }
    resetState(){
      this.setState(merge(this.state,{
        willLeave: false,
        willEnter: false
      }));
    }
    doTransition(callback,optionSlice,willLeave,willEnter){
      let {transitionState,dispatch} = this.props;
      if(optionSlice.transitionBegin){
        optionSlice.transitionBegin(transitionState,dispatch)
      }
      if(willLeave){
        dispatch(actions.willLeave(this.state.key))
      }
      else if(willEnter){
        dispatch(actions.willEnter(this.state.key))
      }
      this.setState(merge(this.state,{
        willLeave: willLeave,
        willEnter: willEnter
      }));
      setTimeout(()=>{
        if(optionSlice.transitionComplete){
          optionSlice.transitionEnd(transitionState,dispatch);
        }
        dispatch(actions.transitionComplete(this.state.key))
        this.resetState();
        callback();
      },optionSlice.duration);
    }
    componentWillLeave(callback){
      this.doTransition(callback,options.willLeave,true,false)
    }
    componentWillEnter(callback){
      this.doTransition(callback,options.willEnter,false,true)
    }
    render() {

      console.log(this.props.transitionState);
      console.log(this.state.key);

      var willEnterClasses = options.willEnter.classNames
      var willLeaveClasses = options.willLeave.classNames
      var classes = classnames(
        {[willEnterClasses] : this.state.willEnter},
        {[willLeaveClasses] : this.state.willLeave},
      )
      return <WrappedComponent animationClasses={classes} {...this.props}/>
    }
  }
}
 
 选项 
 
 选项具有以下结构： 
 
{
  willEnter:{
    classNames : "a b c",
    duration: 1000,
    transitionBegin: (state,dispatch) => {//some custom logic.},
    transitionEnd: (state,dispatch) => {//some custom logic.}
         // I currently am not passing anything here, but I hope to make this a library
         // and am adding the feature to cover any use case that may require it.

  },
  willLeave:{
    classNames : "a b c",
    duration: 1000,
    transitionBegin: (state,dispatch) => {//some custom logic.},
    transitionEnd: (state,dispatch) => {//some custom logic.}

  }
}
 
 转换生命周期（onEnter或onLeave） 
 
 
 
 当组件被挂载时，调度actions.registerComponent 
  
 
   
 componentWillMount 
 
  
 
 
 当组件的componentWillLeave或componentWillEnter挂钩被调用时，相应的选项片段被发送到doTransition 
 
 
 在doTransition中： 
  
 
   
 用户提供的transitionBegin函数被调用（ optionSlice.transitionBegin ） 
 
   
 将分派默认的action.willLeave或action.willEnter 
 
   
 超时设置为动画的持续时间（ optionSlice.duration ）。 超时完成时： 
    
 
     
 用户提供的transitionEnd函数被调用（ optionSlice.transitionEnd ） 
 
     
 默认的actions.transitionComplete被调度 
 
    
 
  
 
 
 实质上，optionSlice只允许用户传递一些选项。 optionSlice.transitionBegin和optionSlice.transitionEnd只是可选的函数，在动画发生时执行，如果适合用例。 我目前没有为我的组件传递任何东西，但我希望很快将它作为一个库，所以我只是覆盖我的基地。 
 
 为什么我会跟踪过渡状态？ 
 
  
 
 根据输入的元素，正在退出的动画会更改，反之亦然。 
 
 例如，在上图中，当蓝色进入时，红色向右移动，当蓝色退出时，红色向左移动。 但是，当绿色进入时，红色向左移动，当绿色退出时，红色向右移动。 为了控制这个，我需要知道当前转换的状态。 
 
 问题： 
 
 TransitionGroup包含两个元素，一个输入，一个退出（由反应路由器控制）。 它传递一个名为transitionState的道具给它的孩子。 Transition HOC（ Transition子女）通过动画过程发送某些redux动作。 正在输入的Transition组件接收到预期的道具更改，但正在退出的组件已冻结。 它的道具不会改变。 
 
 它总是退出的那个没有收到更新的道具。 我尝试切换封装的组件（退出和输入），并且问题不是由于封装的组件。 
 
 图片 
 
 屏幕过渡：  
 
 React DOM中的转换 
 
  
 
 在这种情况下，退出组件Transition（Connect（Home）））没有接收到更新的道具。 
 
 任何想法，为什么是这种情况？ 预先感谢所有的帮助。 
 
 更新1： 
 
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
import {connect} from 'react-redux';
var childFactoryMaker = (transitionState,dispatch) => (child) => {
  console.log(child)
  return React.cloneElement(child, {
    key: (child.props.route.path + "//" + child.type.displayName),
    transitionState: transitionState,
    dispatch: dispatch
  })
}

class TransitionContainer extends React.Component{
  render(){
    let{
      transitionState,
      dispatch,
      children
    } = this.props
    return(
      <div>
      <TransitionGroup childFactory={childFactoryMaker(transitionState,dispatch)}>
          {
            children
          }
      </TransitionGroup>
      </div>
    )
  }
}

export default connect((state)=>({transitionState:state.transitions}),(dispatch)=>({dispatch:dispatch}))(TransitionContainer)
 
 我已经将我的TransitionContainer更新到了上面。 现在， componentWillEnter和componentWillLeave挂钩未被调用。 我在childFactory函数中记录了React.cloneElement(child, {...}) ，并且钩子（以及我定义的函数，如doTransition ）出现在prototype属性中。 只调用constructor componentWillMount和componentWillUnmount 。 我怀疑这是因为key支柱不是通过React.cloneElement注入的。 虽然正在注入transitionState和dispatch 。 
 
 更新2： 
 
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
import {connect} from 'react-redux';
var childFactoryMaker = (transitionState,dispatch) => (child) => {
  console.log(React.cloneElement(child, {
    transitionState: transitionState,
    dispatch: dispatch
  }));
  return React.cloneElement(child, {
    key: (child.props.route.path + "//" + child.type.displayName),
    transitionState: transitionState,
    dispatch: dispatch
  })
}

class TransitionContainer extends React.Component{
  render(){
    let{
      transitionState,
      dispatch,
      children
    } = this.props
    return(
      <div>
      <TransitionGroup childFactory={childFactoryMaker(transitionState,dispatch)}>
      {
        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}
            )
        )
      }
      </TransitionGroup>
      </div>
    )
  }
}

export default connect((state)=>({transitionState:state.transitions}),(dispatch)=>({dispatch:dispatch}))(TransitionContainer)
 
 经过对TransitionGroup来源的进一步检查，我意识到我把密钥放在了错误的地方。 一切都很好。 非常感谢你的帮助！！ 

I am following Chang Wang's tutorial for making reusable React transitions with HOCs and ReactTransitionGroup(Part 1 Part 2) in conjunction with Huan Ji's tutorial on page transitions (Link).
 
The problem I am facing is that React.cloneElementdoes not seem to be passing updated props into one of its children, while other children do properly receive updated props.
 
First, some code:
 
TransitionContainer.js
 
TransitionContainer is a container component that is akin to App in Huan Ji's tutorial. It injects a slice of the state to it's children.
 
The children of the TransitionGroup are all an instance of an HOC called Transition (code further down)
 
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>
    )
  }
}
export default connect((state)=>({transitionState:state.transitions}),(dispatch)=>({dispatch:dispatch}))(TransitionContainer)
 
Transition.js
 
Transition is akin to Chang Wang's HOC. It takes some options, defines the componentWillEnter + componentWillLeave hooks, and wraps a component. TransitionContainer (above) injects props.transitionState into this HOC. However, sometimes the props do not update even if state changes (see The Problem below)
 
import React from 'react';
import getDisplayName from 'react-display-name';
import merge from 'lodash/merge'
import classnames from 'classnames'
import * as actions from './actions/transitions'
export function transition(WrappedComponent, options) {
  return class Transition extends React.Component {
    static displayName = `Transition(${getDisplayName(WrappedComponent)})`;
    constructor(props) {
      super(props);
      this.state = {
          willLeave:false,
          willEnter:false,
          key: options.key
      };
    }
    componentWillMount(){
      this.props.dispatch(actions.registerComponent(this.state.key))
    }
    componentWillUnmount(){
      this.props.dispatch(actions.destroyComponent(this.state.key))
    }
    resetState(){
      this.setState(merge(this.state,{
        willLeave: false,
        willEnter: false
      }));
    }
    doTransition(callback,optionSlice,willLeave,willEnter){
      let {transitionState,dispatch} = this.props;
      if(optionSlice.transitionBegin){
        optionSlice.transitionBegin(transitionState,dispatch)
      }
      if(willLeave){
        dispatch(actions.willLeave(this.state.key))
      }
      else if(willEnter){
        dispatch(actions.willEnter(this.state.key))
      }
      this.setState(merge(this.state,{
        willLeave: willLeave,
        willEnter: willEnter
      }));
      setTimeout(()=>{
        if(optionSlice.transitionComplete){
          optionSlice.transitionEnd(transitionState,dispatch);
        }
        dispatch(actions.transitionComplete(this.state.key))
        this.resetState();
        callback();
      },optionSlice.duration);
    }
    componentWillLeave(callback){
      this.doTransition(callback,options.willLeave,true,false)
    }
    componentWillEnter(callback){
      this.doTransition(callback,options.willEnter,false,true)
    }
    render() {

      console.log(this.props.transitionState);
      console.log(this.state.key);

      var willEnterClasses = options.willEnter.classNames
      var willLeaveClasses = options.willLeave.classNames
      var classes = classnames(
        {[willEnterClasses] : this.state.willEnter},
        {[willLeaveClasses] : this.state.willLeave},
      )
      return <WrappedComponent animationClasses={classes} {...this.props}/>
    }
  }
}
 
options
 
Options have the following structure: 
 
{
  willEnter:{
    classNames : "a b c",
    duration: 1000,
    transitionBegin: (state,dispatch) => {//some custom logic.},
    transitionEnd: (state,dispatch) => {//some custom logic.}
         // I currently am not passing anything here, but I hope to make this a library
         // and am adding the feature to cover any use case that may require it.

  },
  willLeave:{
    classNames : "a b c",
    duration: 1000,
    transitionBegin: (state,dispatch) => {//some custom logic.},
    transitionEnd: (state,dispatch) => {//some custom logic.}

  }
}
 
Transition Lifecycle (onEnter or onLeave)
 
 
 
When the component is mounted, actions.registerComponent is dispatched 
  
 
   
componentWillMount
 
  
 
 
When the component's componentWillLeave or componentWillEnter hook is called, the corresponding slice of the options is sent to doTransition
 
 
In doTransition: 
  
 
   
The user supplied transitionBegin function is called (optionSlice.transitionBegin)
 
   
The default action.willLeave or action.willEnter is dispatched
 
   
A timeout is set for the duration of the animation (optionSlice.duration). When the timeout is complete: 
    
 
     
The user supplied transitionEnd function is called (optionSlice.transitionEnd)
 
     
The default actions.transitionComplete is dispatched
 
    
 
  
 
 
Essentially, optionSlice just allows the user to pass in some options. optionSlice.transitionBegin and optionSlice.transitionEnd are just optional functions that are executed while the animation is going, if that suits a use case. I'm not passing anything in currently for my components, but I hope to make this a library soon, so I'm just covering my bases.
 
Why Am I tracking transition states anyway?
 
 
Depending on the element that is entering, the exiting animation changes, and vice versa. 
 
For example, in the image above, when the blue enters, red moves right, and when the blue exits, red moves left. However when the green enters, red moves left and when the green exits, red moves right. To control this is why I need to know the state of current transitions.
 
The Problem:
 
The TransitionGroup contains two elements, one entering, one exiting (controlled by react-router). It passes a prop called transitionState to its children. The Transition HOC (children of TransitionGroup) dispatches certain redux actions through the course of an animation. The Transition component that is entering receives the props change as expected, but the component that is exiting is frozen. It's props do not change. 
 
It is always the one that is exiting that does not receive updated props. I have tried switching the wrapped components (exiting and entering), and the issues is not due to the wrapped components.
 
Images
 
On-Screen Transition: 
 
Transition in React DOM
 
 
The exiting component Transition(Connect(Home))), in this case, is not receiving updated props.
 
Any ideas why this is the case? Thanks in advance for all the help.
 
Update 1:
 
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
import {connect} from 'react-redux';
var childFactoryMaker = (transitionState,dispatch) => (child) => {
  console.log(child)
  return React.cloneElement(child, {
    key: (child.props.route.path + "//" + child.type.displayName),
    transitionState: transitionState,
    dispatch: dispatch
  })
}

class TransitionContainer extends React.Component{
  render(){
    let{
      transitionState,
      dispatch,
      children
    } = this.props
    return(
      <div>
      <TransitionGroup childFactory={childFactoryMaker(transitionState,dispatch)}>
          {
            children
          }
      </TransitionGroup>
      </div>
    )
  }
}

export default connect((state)=>({transitionState:state.transitions}),(dispatch)=>({dispatch:dispatch}))(TransitionContainer)
 
I've updated my TransitionContainer to the above. Now, the componentWillEnter and componentWillLeave hooks are not being called. I logged the React.cloneElement(child, {...}) in the childFactory function, and the hooks (as well as my defined functions like doTransition) are present in the prototype attribute. Only constructor, componentWillMount and componentWillUnmount are called. I suspect this is because the key prop is not being injected through React.cloneElement. transitionState and dispatch are being injected though. 
 
Update 2:
 
import React from 'react';
import TransitionGroup from 'react-addons-transition-group';
import {connect} from 'react-redux';
var childFactoryMaker = (transitionState,dispatch) => (child) => {
  console.log(React.cloneElement(child, {
    transitionState: transitionState,
    dispatch: dispatch
  }));
  return React.cloneElement(child, {
    key: (child.props.route.path + "//" + child.type.displayName),
    transitionState: transitionState,
    dispatch: dispatch
  })
}

class TransitionContainer extends React.Component{
  render(){
    let{
      transitionState,
      dispatch,
      children
    } = this.props
    return(
      <div>
      <TransitionGroup childFactory={childFactoryMaker(transitionState,dispatch)}>
      {
        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}
            )
        )
      }
      </TransitionGroup>
      </div>
    )
  }
}

export default connect((state)=>({transitionState:state.transitions}),(dispatch)=>({dispatch:dispatch}))(TransitionContainer)
 
After further inspection of the TransitionGroup source, I realized that I put the key in the wrong place. All is well now. Thanks so much for the help!!

原文：https://stackoverflow.com/questions/41404232