加载微调器的问题-ReactJS

Question

我是ReactJS的新手，所以我可能在这里没有注意到明显的问题。问题是加载时不可见。我在return（）之前尝试使用alert和console.log，它也无法正常工作。

这里是代码，组件成功链接：

import React, {Component} from 'react';
import styled, {keyframes} from 'styled-components';
import LoaderImg from './LoaderImg.png';
import './Loader.scss';

const spinning = keyframes`
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
`;

const Spinner = styled.div`
    animation: ${spinning} 2s infinite linear;
`;

class Loader extends React.Component {
    constructor(props) {
       super(props);
       this.handleLoad = this.handleLoad.bind(this);
    }

    componentDidMount() {
        window.addEventListener('load', this.loading);
        window.requestAnimationFrame(this.loading);
    }

    componentWillUnmount() { 
      window.removeEventListener('load', this.loading);
    }

    loading() {
        console.log("TEST");
        return (
            <Spinner className="Spinner">
                <img src={LoaderImg} className="Spinner-Img"/>
            </Spinner>
        );
    }
  }

export default Loader;

Answer 1

您在这里。

class Loader extends React.Component {
    constructor(props) {
       super(props);
       this.handleLoad = this.handleLoad.bind(this);
    }

    componentDidMount() {
        window.addEventListener('load', this.loading);
        window.requestAnimationFrame(this.loading);
    }

    componentWillUnmount() { 
      window.removeEventListener('load', this.loading);
    }

    render() {
        console.log("TEST");
        return (
            <Spinner className="Spinner">
                <img src={LoaderImg} className="Spinner-Img"/>
            </Spinner>
        );
    }
  }

Answer 2

*将loading（）更改为render（）-或-添加：

render(){
    return (
        <div>
            {/* some more components*/}
            {this.loading()}
        </div>
    )

Answer 3

您的渲染方法在哪里？我认为它没有加载，因为您使用了loading（）而不是render，并且您还没有从任何库或包中导入Spinner对象。试试这个

render() {
    console.log("TEST");
    return (
        <Spinner className="Spinner">
            <img src={LoaderImg} className="Spinner-Img"/>
        </Spinner>
    );
}

并且，如果它不起作用，则说明您的微调器存在问题。请尝试使用此库。react spinners.这将帮助您添加微调器。