未使用TransitionGroup調用componentWillEnter

Question

我正在嘗試使用React Router 4將頁面轉換添加到我的應用程序中。由於某種原因，未調用function componentWillEnter和componentWillLeave函數。 有人知道為什么嗎？

index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './containers/App';

render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

組件/App.js：

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import TransitionGroup from 'react-transition-group/TransitionGroup';
import Home from '../components/home/Home';
import Users from '../components/users/Users';

const firstChild = (props) => {
  const childrenArray = React.Children.toArray(props.children);
  return childrenArray[0] || null;
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <ul className="TopBar">
          <Link to="/">Home</Link>
          <Link to="/users">Users</Link>
        </ul>
        <Route
          exact
          path="/"
          children={({ match, ...rest }) => (
            <TransitionGroup component={firstChild}>
              {match && <Home {...rest} />}
            </TransitionGroup>
        )} />
        <Route
          path="/users"
          children={({ match, ...rest }) => (
            <TransitionGroup component={firstChild}>
              {match && <Users {...rest} />}
            </TransitionGroup>
        )} />
      </div>
    );
  }
}

export default App;

組件/AnimatedWrapper.js

import React, { Component } from 'react';

const AnimatedWrapper = WrappedComponent => class AnimatedWrapper extends Component {
  constructor(props) {
    super(props);
    this.state = {
      animate: 0
    };
  }

  componentWillAppear(cb) {
    console.log('WillAppear');

    this.setState({
      animate: 1
    });

    cb();
  }

  componentWillEnter(cb) {
    console.log('WillEnter');

    this.setState({
      animate: 1
    });

    cb();
  }

  componentWillLeave(cb) {
    console.log('WillLeave');

    this.setState({
      animate: 0
    });

    setTimeout(() => cb(), 175);
  }

  render() {
    console.log(this.state.animate);
    const style = {
      opacity: `${this.state.animate}`,
    };
    return (
      <div style={style} className="animated-page-wrapper">
        <WrappedComponent {...this.props} />
      </div>
    );
  }
};

export default AnimatedWrapper;

組件/Home.js

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

class HomeComponent extends Component {
  render() {
    return (
      <div className="page">
        <h1>Home</h1>
        <p>Hello from the home page!</p>
      </div>
    );
  }
}

const Home = AnimatedWrapper(HomeComponent);
export default Home;

組件/Users.js：

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

class UsersComponent extends Component {
  render() {
    return (
      <div className="page">
        <h1>Users</h1>
        <p>Hello from users page!</p>
      </div>
    );
  }
}

const Users = AnimatedWrapper(UsersComponent);
export default Users;

Answer 1

編輯：我認為TransitionGroup無法以這種方式工作。 它是低級組件，無法到達<Switch>和<Route>內的componentWillEnter()掛鈎。

您可以改為使用ReactCSSTransitionGroup 。

或者嘗試像這樣更復雜的事情： https : //hackernoon.com/animated-page-transitions-with-react-router-4-reacttransitiongroup-and-animated-1ca17bd97a1a