0

我正在使用 react-loadable@5.5.0 在基本的 Web 应用程序上进行代码拆分。无论我是否设置了delay道具，加载微调器都会在页面加载时立即闪烁，没有延迟。我已经剥离了应用程序以删除一些路由逻辑，删除了 CSS 动画，尝试了 @5 版本的早期版本，删除了仍然呈现的 AppBar，图标仍然在页面加载时立即闪烁，没有延迟。这是 Loadable 实现的精简版本：

import React from "react";
import { Route, Switch } from "react-router-dom";
import Loadable from "react-loadable";
import Cached from "@material-ui/icons/Cached";


function SpinningIcon() {
  return <Cached color="inherit" className="spinning" />;
}

const AsyncHome = Loadable({
  loader: () => import("./containers/Home"),
  loading: SpinningIcon,
  delay: 1000
  //delay at 1 second, still flashes on load

});
const AsyncLogin = Loadable({
  loader: () => import("./containers/Login"),
  loading: SpinningIcon
  //no delay prop, still flashes
});

export default ({ childProps }) => (
  <Switch>
    <Route path="/" exact component={AsyncHome} props={childProps} />
    <Route path="/login" exact component={AsyncLogin} props={childProps} />
  </Switch>
);

我不知道如何继续前进，有没有人遇到过同样的问题？是否有其他信息可能有助于解决问题？

4

1 回答 1

0

如文档中所述，您在加载时忘记了“pastDelay”道具：避免加载组件的Flash

你的函数应该是这样的：

function SpinningIcon({ pastDelay }) {
  if (pastDelay) {
    return <Cached color='inherit' className='spinning' />
  }

  return null
}

希望这可以帮助 ：）

于 2019-02-07T19:05:30.220 回答