私の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関数なしでそれをするように見えることはできません。