用asyncComponent反应ReactCSSTransitionGroup

时间:2018-09-09 09:28:54

标签: javascript reactjs reactcsstransitiongroup

通过以下示例,我尝试基于ReactCSSTransitionGroup包来加载具有适当组件的组件异步性:jitpack.io
因此,我将所有内容合并为一个组件,如下所示:

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组件中的过渡无法正常工作,例如在codeandbox的示例中,我不知道为什么会这样。

0 个答案:

没有答案