加载微调器的问题 - 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 并且您没有从任何库或包中导入 Spinner 对象。试试这个

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

如果它不起作用，则说明您的微调器有问题。试试这个库。 react spinners. 这将帮助您添加微调器。

Answer 3

你错过了渲染功能请添加这个

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

Answer 4

需要一个渲染函数，因为它将被 React 调用以渲染/重新渲染组件

-或者-将 loading() 更改为 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 5

React 文档说

render() 方法是类组件中唯一需要的方法。

你错过了，你可以这样做

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

希望对你有帮助