Question

我正在尝试在React中实现预加载器，

我尝试了以下

class MainApp extends React.Component {

  componentDidMount() {
    this.preloader.style.display = 'none';
  }

  render() {
    return (
        <div id="loader-container" ref={(c) => { this.preloader = c; }} />
        <SomeComponent />
    );
  }
}

但是，在加载完成之前很久就会出现预加载器消失。

如何将预加载器的删除绑定到加载事件？

Answer 1

我认为问题在于，当您安装了父组件（MainApp）并且请求可能尚未完成时，您将隐藏加载程序容器。

您可以将负载完成时调用的函数传递给子组件，如下所示：

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

    hideLoader() {
        this.preloader.style.display = 'none';
    }

    render() {
        return (
            <div id="loader-container" ref={(c) => { this.preloader = c; }} />
            <SomeComponent onLoaded={this.hideLoader} />
        );
    }
}

在SomeComponent中，您应该在请求完成后致电this.props.onLoaded()。像这样：

class SomeComponent extends React.Component {
    componentWillMount () {
        fetch(url)
        .then(response => {
            this.setState(...);
            this.props.onLoaded();
        });
     }
}

Answer 2

好的，所以我用了

window.addEventListener('load', this.handleLoad);

在componentDidMount

和

  handleLoad() {
    $('#loader-container').hide(); //  $ is available here
  }

似乎在做这项工作

由于

反应和加载事件

2 个答案: