Реагировать ReactCSSTransitionGroup с asyncComponent - PullRequest
Новая
       8

Реагировать ReactCSSTransitionGroup с asyncComponent

0 голосов
/ 09 сентября 2018

Я пытаюсь загрузить асинхронность компонентов с соответствующей базой компонентов в пакете ReactCSSTransitionGroup в следующем примере: https://codesandbox.io/s/zkqlq2vo?from-embed
Поэтому я объединил все в один компонент следующим образом: 

import React, { Component } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import './PageShell.less';

const PageShell = (importComponent) => {
    return class extends Component {
        state = {
            component: null
        }

        componentDidMount() {
            importComponent()
                .then(cmd => {
                    this.setState({ component: cmd.default });
                })
                .catch({});
        }

        render() {
            const C = this.state.component;
            const component = C ? (<C {...this.props} />) : null;

            return (
                <ReactCSSTransitionGroup
                    transitionAppear={true}
                    transitionAppearTimeout={600}
                    transitionEnterTimeout={600}
                    transitionLeaveTimeout={200}
                    transitionName={`Slide${Math.random() >= 0.5 ? 'In' : 'Out'}`}>
                    {component}
                </ReactCSSTransitionGroup>
            );
        }
    };
};

export default PageShell;


И в моем App.js: 

import React, { Component } from 'react';
import Layout from './hoc/Layout/Layout';
import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder';
import Logout from './containers/Auth/Logout/Logout';
import AsyncComponent from './hoc/AsyncComponent/AsyncComponent';

const asyncCheckout = AsyncComponent(() => {
  return import('./containers/Checkout/Checkout/Checkout');
});

const asyncOrders = AsyncComponent(() => {
  return import('./containers/Orders/Orders');
});

const asyncAuth = AsyncComponent(() => {
  return import('./containers/Auth/Auth/Auth');
});


class App extends Component {
  render() {
    let routes = (
      <Switch>
        <Route path="/auth" component={PageShell(asyncAuth)} />
        <Route path="/" exact component={PageShell(BurgerBuilder)} />
        <Redirect to="/" />
      </Switch>
    );

    return (
      <div>
        <Layout>
          {routes}
        </Layout>
      </div>
    );
  }
}

export default App;


По какой-то причине, которую я не понимаю, переход в моем обновленном компоненте PageShell не работает, как в примере с codesandbox, и я не могу понять, почему это так.

...