javascript - 如何在 setTimeout 后返回 jsx

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 做一个返回语句？

Answer 1

注意:这是根据从这篇文章中删除的答案编写的答案。

我觉得你需要有两个变量，一个是loader，另一个是show loader。一秒钟后，如果它仍在加载，我们应该更新 stat 以显示加载程序，否则不会显示。

state= {
   loading: true,
   showLoader: false
}

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