2017-11-23 12 views
0

私のcomponentWillAppear, componentWillEnter and componentWillLeaveが私のsrc/AnimatedWrapperが決して発砲しないのはなぜわかりませんか?そのファイルのcomponentDidMountだけが起動するようです。他のライフサイクルイベントを起動させるにはどうすればよいですか?ここで私はここでcomponentWillAppearとcomponentWilEnterは決して発動しません

を試してみました。ここに私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

あるものです

アニメーションページ遷移を試行するには、ここでこのガイドに従ってください。https://hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a私は言及されたlifeCycle関数なしでそれをするように見えることはできません。

答えて

0

私はpackage.jsonファイルに入り、2.xから"react-transition-group": "^1.2.0"に反応遷移グループをダウングレードすることで問題を解決しました。

関連する問題