Reactjs React-TransitionGroup和React.cloneElement不发送更新的道具

我正在学习Chang Wang关于使用HOCs和

ReactTransitionGroup

（）制作可重用React转换的教程，以及Huan Ji关于页面转换的教程（）

我面临的问题是，

React.cloneElement

似乎没有将更新的道具传递给它的一个子级，而其他子级确实会收到更新的道具

首先，一些代码： TransitionContainer.js

TransitionContainer

是一个容器组件，类似于Huan Ji教程中的

App

。它将国家的一部分注入到它的孩子身上

TransitionGroup

的子级都是名为

Transition

的HOC的实例（代码进一步向下）

选项

选项具有以下结构：

{
  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.}

  }
}

过渡生命周期（OneNet或onLeave）

• 安装组件时，

  actions.registerComponent

  被调度

  • 组件将安装

• 当调用组件的

  componentwillleft

  或

  componentWillEnter

  钩子时，相应的选项片段将发送到

  doTransition

• 在doTransition中：
  • 调用用户提供的transitionBegin函数（

    optionSlice.transitionBegin

    ）
  • 默认的

    action.willLeave

    或

    action.willEnter

    被调度
  • 设置动画持续时间的超时（

    optionSlice.duration

    ）。超时完成后：
    • 调用用户提供的transitionEnd函数（

      optionSlice.transitionEnd

      ）
    • 默认的

      actions.transitionComplete

      被调度

本质上，optionSlice只允许用户传入一些选项

optionSlice.transitionBegin

和

optionSlice.transitionEnd

只是在动画运行时执行的可选功能，如果这符合用例的话。我目前没有为我的组件传递任何东西，但我希望很快将其变成一个库，所以我只介绍我的基本知识

我为什么还要跟踪过渡状态？

根据输入的元素，退出的动画会发生更改，反之亦然

例如，在上图中，蓝色进入时，红色向右移动，蓝色退出时，红色向左移动。然而，当绿色进入时，红色向左移动，当绿色退出时，红色向右移动。为了控制这一点，我需要知道当前转换的状态

问题：

TransitionGroup

包含两个元素，一个进入，一个退出（由react路由器控制）。它将名为

transitionState

的道具传递给其子级。

Transition

HOC（TransitionGroup的子对象）在动画过程中发送某些redux操作。正在进入的

转换

组件按预期接收道具更改，但正在退出的组件被冻结。它的道具不会改变

退出的人总是不会收到更新的道具。我尝试过切换包装的组件（退出和进入），但问题并不是由于包装的组件造成的

图像 屏幕转换：

反应DOM中的转换

在本例中，退出的组件转换（连接（主）未接收更新的道具

你知道为什么会这样吗？提前谢谢你的帮助

更新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)

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源代码后，我意识到我将密钥放错了位置。现在一切都好了。非常感谢你的帮助

决定进入和离开儿童 想象一下在下面呈现示例JSX：

<TransitionGroup>
  <div key="one">Foo</div>
  <div key="two">Bar</div>
</TransitionGroup>

上述元素将存储为

state.children

。然后，我们将

更新为：

<TransitionGroup>
  <div key="two">Bar</div>
  <div key="three">Baz</div>
</TransitionGroup>

比较

state.children

和

nextrops.children

，我们可以确定：

一,。

{type:'div'，props:{key:'one'，children:'Foo'}}

正在离开

二,。

{type:'div'，props:{key:'three'，children:'Baz'}}

正在输入

在常规React应用程序中，这意味着不再呈现

Foo

，但

的子级则不是这样

的工作原理 那么，

如何才能继续渲染不再存在于

props.children

中的组件呢

所做的是在其状态下维护一个

子数组。每当
收到新道具时，此数组将由当前
状态.children
和
下一步.children
更新。（初始数组是在
构造函数中使用初始
子类
属性创建的）

现在，当
呈现时，它会呈现
状态.children
数组中的每个子元素。渲染完成后，它对任何进入或离开的子对象调用
performEnter
和
performLeave
。这将依次执行组件的转换方法

离开组件的
componentWillLeave
方法（如果有）完成执行后，它将从
状态.children
数组中删除自己，使其不再呈现（假设它离开时没有重新输入）

给离开的孩子传递道具？
现在的问题是，为什么不将更新的道具传递给离开的元素？那么，它将如何获得道具呢？道具从父组件传递到子组件。如果您查看上面的示例JSX，您可以看到剩下的元素是i
<TransitionGroup>
  <div key="one">Foo</div>
  <div key="two">Bar</div>
</TransitionGroup>

[
  { type: 'div', props: { key: 'one', children: 'Foo' }},
  { type: 'div', props: { key: 'two', children: 'Bar' }}
]

<TransitionGroup>
  <div key="two">Bar</div>
  <div key="three">Baz</div>
</TransitionGroup>

[
  { type: 'div', props: { key: 'two', children: 'Bar' }},
  { type: 'div', props: { key: 'three', children: 'Baz' }}
]

function childFactory(child) {
  return React.cloneElement(child, {
    transitionState,
    dispatch
  })
}

var ConnectedTransitionGroup = connect(
  store => ({
   transitionState: state.transitions
  }),
  dispatch => ({ dispatch })
)(TransitionGroup)

render() {
  return (
    <ConnectedTransitionGroup childFactory={childFactory}>
      {children}
    </ConnectedTransitionGroup>
  )
}