reactjs - React CSSTransition 退出时使用了错误的类

Question

更新:

对于那些面临同样问题的人:我在 ReactTransitionGroup 的 git 页面上发现了类似的问题，其中有解决方案:https://github.com/reactjs/react-transition-group/issues/182 .

说实话，90%的解决方案都让我难以理解，而且我根本不理解其中的内容，这是唯一对我有意义的部分(取自 React TransitionGroup and React.cloneElement do not send updated props ，它链接到 git问题):

Passing Props to Leaving Children? Now the question is, why aren't updated props being passed to the leaving element? Well, how would it receive props? Props are passed from a parent component to a child component. If you look at the example JSX above, you can see that the leaving element is in a detached state. It has no parent and it is only rendered because the is storing it in its state.

我必须进一步研究和了解父组件和子组件的通信方式。我对网络开发还是个新手，但事情正在慢慢开始变得有意义。

--------------------------------

最初提出的问题:

当您尝试通过 React.cloneElement 将状态注入(inject)到您的子组件时，离开的组件不是这些子组件之一。

我有一个小应用程序，其中包含导航菜单和嵌套在开关容器之间的路线。每次单击导航项时，我都会检查索引是否较高或较低，以相应地设置动画状态(左或右)，然后存储单击的导航项的新索引。

每次我切换路线时，应用的动画要么是左淡出，要么是右淡出。现在这一切都工作正常，但唯一的问题是当类从左向右切换时，应用的 EXIT 动画使用之前给出的类。

我明白为什么会发生这种情况，因为使用的退出类是最初设置的，当新类仅应用于第二次更改时，新退出才会生效。转换文档非常有限，我找不到任何内容。

const { Component } = React;
const { TransitionGroup, CSSTransition } = ReactTransitionGroup;
const { HashRouter, Route, NavLink, Switch, withRouter } = ReactRouterDOM;

var icons = [
 {icon: 'far fa-address-book active', path: '/'},
 {icon: 'fab fa-linkedin', path: '/linked'},
 {icon: 'fas fa-gamepad', path: '/hobbies'}
];

const Nav = props => {
  return (
   <div className="nav">
    <ul>
      { 
        icons.map((icon, index) => {
          return (
            <li
              key={index}
              onClick={() => props.clicked(index)}
              className={props.active == index ? 'active' : false}>
                <NavLink to={icon.path} className="NavLink">
                  <i className={icon.icon} key={icon.icon}></i>
                </NavLink>
            </li>
          );
        })
      }
    </ul>
  </div>
);
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentViewIndex: 0,
      animationDirection: 'right'
    }

   this.setIndex = this.setIndex.bind(this);
 }

 setIndex(index){
   const animationDirection = index < this.state.currentViewIndex ? 'left' : 'right';
   this.setState({currentViewIndex: index, animationDirection});
 }

  render () {
    const { location } = this.props;

    return (
      <div className="container">
        <Nav active={this.state.currentViewIndex} clicked={() => this.setIndex()} />
        <TransitionGroup>
          <CSSTransition
            key={location.pathname}
            classNames={`fade-${this.state.animationDirection}`}
            timeout={1000}>
            <Switch location={location}>
              <Route exact path="/" render={() => <h1>Home</h2>} />
              <Route path="/linked" render={() => <h1>Linked</h2>} />
              <Route path="/hobbies" render={() => <h1>Hobbies</h2>} />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </div>
    );
   }
 }

const AppWithRouter = withRouter(App);

ReactDOM.render(<HashRouter><AppWithRouter /></HashRouter>, document.querySelector('#root'));

应用于过渡的 CSS 类:

.fade-left-enter {
  position: unset;
  transform: translateX(-320px);
}

.fade-left-enter.fade-left-enter-active {
  position: unset;
  transform: translateX(0);
  transition: transform .5s ease-in;
}

.fade-left-exit {
  position: absolute;
  bottom: 0;
  transform: translateX(0);
}

.fade-left-exit.fade-left-exit-active {
  transform: translateX(320px);
  transition: transform .5s ease-in;
}

.fade-right-enter {
  position: unset;
  transform: translateX(320px);
} 

.fade-right-enter.fade-right-enter-active {
  position: unset;
  transform: translateX(0);
  transition: transform .5s ease-in;
}

.fade-right-exit {
  position: absolute;
  bottom: 0;
  transform: translateX(0);
}

.fade-right-exit.fade-right-exit-active {
  transform: translateX(-320px);
  transition: transform .5s ease-in;
}

Answer 1

您的问题的原因是现有组件已分离，因此不会获得任何更新。您可以找到对您的问题的很好的解释 here 。

您可以使用 Prop childFactory来自<TransitionGroup>解决这个问题:

childFactory

You may need to apply reactive updates to a child as it is exiting. This is generally done by using cloneElement however in the case of an exiting child the element has already been removed and not accessible to the consumer.

If you do need to update a child as it leaves you can provide a childFactory to wrap every child, even the ones that are leaving.

尝试在渲染方法中更改以下代码:

render () {
  const { location } = this.props;

  const classNames = `fade-${this.state.animationDirection}`; // <- change here

  return (
    <div className="container">
      <Nav active={this.state.currentViewIndex} clicked={() => this.setIndex()} />
      <TransitionGroup 
        childFactory={child => React.cloneElement(child, { classNames })} // <- change here
      >
        <CSSTransition
          key={location.pathname}
          classNames={classNames} // <- change here
          timeout={1000}
        >
            <Switch location={location}>
              <Route exact path="/" render={() => <h1>Home</h2>} />
              <Route path="/linked" render={() => <h1>Linked</h2>} />
              <Route path="/hobbies" render={() => <h1>Hobbies</h2>} />
            </Switch>
        </CSSTransition>
      </TransitionGroup>
    </div>
  );

}