>

내 사이트에 로더 아이콘을 추가하려고하는데 구성 요소에 넣고 가져와야합니까? 페이지가 새로 고침 될 때 페이지가로드 될 때 상태가 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

    기본 상태는 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;
    
    

    그러면 전역 컨텍스트 또는 redux 저장소를 사용하여 isLoading 의 상태를 업데이트 할 수 있습니다

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

  • 이전 스위프트에서의 테스트를위한 튜플
  • 다음 php - HTML에서 숫자를 찾는 방법은 무엇입니까?