проблема с загрузкой счетчика - ReactJS

Question

Я новичок в ReactJS, поэтому, вероятно, я не заметил здесь ничего очевидного. Проблема в том, что не видно при загрузке. Я пробовал с предупреждением и console.log до return(), он тоже не работает.

Вот код, компоненты успешно связаны:

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

React docs говорит:

Метод render () является единственным обязательным методом в компоненте класса.

Вам не хватает этого, вы можете сделать это

render() {
  return <>{this.loading()}</>
}

Надеюсь, это поможет

Answer 2

Вы пропустили функцию рендера, пожалуйста, добавьте это

 render() {
   return (
       <>
       {this.loading()}
       </>
    )
 }

Answer 3

Функция рендеринга необходима, так как она будет вызываться React для рендеринга / повторного рендеринга компонента.

-either- изменить load () на render ()

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

-или- добавить:

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

}

Answer 4

Где ваш метод рендеринга? Я думаю, что это не загрузка, потому что вы использовали load () вместо render И вы не импортировали объект Spinner из какой-либо библиотеки или пакета. Попробуйте это

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

, и если это не работает, проблема с вашим счетчиком. Попробуйте эту библиотеку. Реагируют на счетчики. Это поможет вам добавить счетчик.

Answer 5

Вот, пожалуйста.

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>
        );
    }
  }