Question

我正在使用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>
);

我不知所措，要继续前进，有人遇到过同样的问题吗？还有其他信息可以帮助您解决问题吗？

Answer 1

您在加载时忘记了“ pastDelay”道具，如文档所述：Avoiding Flash Of Loading Component

您的功能应如下所示：

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

  return null
}

希望这会有所帮助：）

延迟道具不起作用，加载道具“闪烁”而没有延迟

1 个答案: