Значок загрузчика постоянно отображается в моем приложении. JS - PullRequest
Новая
       13

Значок загрузчика постоянно отображается в моем приложении. JS

0 голосов
/ 02 июня 2019

Я пытаюсь добавить значок загрузчика на свой сайт, но он постоянно показывает, должен ли я поместить его в компонент и импортировать?Состояние устанавливается в 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>
      </>
    );
  }
}

1 Ответ

1 голос
/ 02 июня 2019

ваше состояние по умолчанию установлено в true.поэтому он покажет загрузку после того, как компонент отобразит 

   this.state = {
      loading: false
    };

. Вы можете изменить загрузчик на 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;

. Затем вы можете использовать глобальный контекст или хранилище с избыточностью для обновления состояния.из isLoading

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