加载程序图标不断显示在我的App.JS中

Question

我试图添加一个加载器图标到我的网站，但它不断显示，我是否应该把它放在一个组件中并导入它？状态被设置为true，因为页面正在加载，当它刷新时，可能与此有关。

这是我的app.js文件

import React from "react";

import { createBrowserHistory } from "history";
import { Router, Route, Switch } from "react-router-dom";

import "assets/scss/material-kit-react.scss?v=1.4.0";

// pages for this product
import LandingPage from "views/LandingPage/LandingPage.jsx";
import ProfilePage from "views/ProfilePage/ProfilePage.jsx";
import { css } from "@emotion/core";
// First way to import
import { ClipLoader } from "react-spinners";

const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
var hist = createBrowserHistory();

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    };
  }
  render() {
    return (
      <>
        <ClipLoader
          css={override}
          sizeUnit={"px"}
          size={150}
          color={"#123abc"}
          loading={this.state.loading}
        />
        <Router history={hist}>
          <Switch>
            <Route path="/profile-page" component={ProfilePage} />
            <Route path="/" component={LandingPage} />
          </Switch>
        </Router>
      </>
    );
  }
}

Answer 1

您的默认状态设置为true。因此，它将在组件呈现后显示加载

   this.state = {
      loading: false
    };

您可以将Loader更改为HOC

import React from 'react';
import { ClipLoader } from "react-spinners";

function Loading(Component) {
  return function WihLoadingComponent({ isLoading, ...props }) {
    if (!isLoading) return (<Component {...props} />);
    return (<ClipLoader
          css={override}
          sizeUnit={"px"}
          size={150}
          color={"#123abc"}
          loading={isLoading}
        />);
  }
}
export default Loading;

然后，您可以使用全局上下文或redux存储来更新isLoading的状态

render() {
    return (
      <Loading isLoading={this.props.isLoading} data={data} />
    )
  }