Question

我有一个加载状态，仅当加载时间超过1秒时才显示（因为即使加载时间只有几毫秒，我也不想一直显示加载器）。

这是一个显示装载程序的文件，与装载速度无关：

if(loading) {
    return <div className="loader" />;
}

这是带有setTimeout的那个：

if(loading) {
    setTimeout(function() {
        return <div className="loader" />;
    }, 1000);
}

我知道return语句适用于setTimeout，而不适用于导致其无效的组件。

然后我应该首先创建一个状态（例如isLoadingSlow），然后在setTimeout回调中1秒后将其更改为true吗？然后从该状态开始，然后我将使用加载程序jsx做一个return语句？

Answer 1

注意：这是根据从此帖子中删除的答案写的答案。

我认为您需要有两个变量，一个是加载程序，另一个是显示加载程序。一秒钟后，如果仍在加载，我们应该更新统计信息以显示加载器，否则将不会显示。

state= {
   loading: true,
   showLoader: false
}

componentDidMount() {
    setTimeout(() => {
      if(this.loading){
          this.setState({ showLoader: true })
      }
    }, 1000);
}
render() {
   if(this.state.showLoader) {
        return <div className="loader" />;
   }
}

setTimeout之后如何返回jsx

1 个答案: