javascript - 加载器图标不断显示在我的 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} />
    )
  }