Question

我尝试使用React-router和ReactTransitionGroup为页面转换设置动画。

每个页面必须有不同的过渡。

<ReactTransitionGroup component="div" className="animationContainer" {...this.props}>
  <Login />
</ReactTransitionGroup>

像这样，组件只运行componentWillAppear。我也想设置离开过渡。

正确处理这些问题的最佳方法是什么？

这就是我现在尝试处理ReactTransitionGroup的方法：

// App.js
render() {
    const { children, loggedIn, user, application } = this.props;

    const intlData = {
      locale: application.locale,
      messages: i18n[application.locale],
    };

    return (
      <IntlProvider key="intl" {...intlData}>
        <div id="application">
          <div className="page-wrap">
            <Header loggedIn={ loggedIn } user={ user } handleLogout={ this.handleLogout } handleLanguageChange={this.handleLanguageChange} />
            <MainNavigation />
            <ReactTransitionGroup component="div" className="animationContainer" {...this.props}>
              {React.cloneElement(children, {
                key: this.props.location.pathname,
              })}
            </ReactTransitionGroup>
          </div>
          <Footer />
        </div>
      </IntlProvider>
    );
  }

我尝试为我的登录组件创建一个显示，输入和离开动画。

  // login.js
  componentWillLeave(callback) {
    setTimeout(callback, 2000);
    console.log('componentWillLeave'); // doesn't log
  }

  /**
   * Reçoit les valeurs des formulaires
   */
  handleFormSubmit(data) {
    const { dispatch } = this.props;

    dispatch(fetchLoginAuth(data));
  }

  /**
   * Render le component - ReactTransitionGroup
   * @return {JSX} Rend la page Registration
   */
  render() {
    return (
      <div id="login-page">
        <div className="container-fluid">
          <div className="row">
            <div className="col-md-2">
              <Link to="/" className="home-link"><img src={BASE_URL + '/assets/img/logo.svg'} alt="logo" /></Link>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-4 col-lg-offset-4">
              <h1><FormattedMessage {...messages.loginPageTitle} /></h1>
            </div>
          </div>
          {React.cloneElement(this.props.children || <div />, { onSubmit: this.handleFormSubmit, login: this.props.login })}
        </div>
      </div>
    );
  }

此设置与我的注册页面相同，并且表单状态和注册时，它都有效。

谢谢！

Answer 1

内部组件将执行所有这些可用于设置进入和离开行为的功能。

{{1}}

因此，您的Login组件将执行那些，因为它由转换组包装。

使用ReactTransitionGroup

1 个答案: