0

我不明白为什么我componentWillAppear, componentWillEnter and componentWillLeave的 from mysrc/AnimatedWrapper从不开火？似乎只有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 函数，我似乎无法做到这一点。

4

1 回答 1

0

我通过进入我的package.json文件并将 react-transition-group 从 2.x 降级到"react-transition-group": "^1.2.0".

于 2017-11-23T06:43:43.440 回答