componentWillAppear 和 componentWilEnter 永远不会触发

Question

我不明白为什么我的 src/AnimatedWrapper 中的 componentWillAppear, componentWillEnter and componentWillLeave 永远不会触发？似乎只有该文件的 componentDidMount 会触发。如何触发其他生命周期事件？这是我试过的

这是我的 src/App.js

import React, { Component } from 'react';
import { Route, Link } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import Home from './Home';
import About from './About';
const firstChild = props => {
    const childrenArray = React.Children.toArray(props.children);
      return childrenArray[0] || null;
};
export default class App extends Component
{
  render() {

    return (
      <div>
        <Link to={"/"}>Home</Link>
        <Link to={"/about"}>About</Link>
        <Route
          path="/about"
          children={({ match }) => (
            <TransitionGroup component={firstChild}>
              {match && <About />}
            </TransitionGroup>
        )}/>
        <Route
          path="/"
          children={({ match }) => (
            <TransitionGroup component={firstChild}>
              {match && <Home />}
            </TransitionGroup>
        )}/>
      </div>
    )
  }
}

这是我的src/Home.js

import React, { Component } from 'react';
import AnimatedWrapper from './AnimatedWrapper';

class Home extends Component {
  render() {
    return <div>hi</div>;
  }
}
const H = AnimatedWrapper(Home);
export default H;

这是我的src/About.js

import React, { Component } from 'react';
import AnimatedWrapper from './AnimatedWrapper';

class About extends Component {
  render() {
    return <div>hi</div>;
  }
}
const H = AnimatedWrapper(Home);
export default H;

这是我的 src/AnimatedWrapper.js

import React, { Component } from "react";
import * as Animated from "animated/lib/targets/react-dom";
const AnimatedWrapper = WrappedComponent => class AnimatedWrapper
 extends Component {
 constructor(props) {
  super(props);
 }
 componentDidMount() {
   console.log('mount');
 }
 componentWillAppear() {
   console.log('appear');
 }
 componentWillEnter() {
   console.log('enter');
 }
 componentWillLeave() {
   console.log('leave');
 }
 render() {
  return (
   <Animated.div className="animated-page-wrapper">
   </Animated.div>
  );
 }
};
export default AnimatedWrapper;

归根结底，我只是想按照此处的指南 https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a 尝试进行动画页面转换。如果没有提到的 lifeCycle 函数，我似乎无法做到这一点。

Answer 1

我通过进入我的 package.json 文件并将 react-transition-group 从 2.x 降级到 "react-transition-group": "^1.2.0" 来解决这个问题。

componentWillAppear 和 componentWilEnter 永远不会触发

componentWillAppear and componentWilEnter never fires

react-transition-group