如何在 setTimeout 后返回 jsx答案

【问题标题】：How to return jsx after setTimeout如何在 setTimeout 后返回 jsx
【发布时间】：2018-10-11 07:00:27
【问题描述】：

我有一个加载状态，我只想在加载时间超过 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语句？

【问题讨论】：

我认为目前还没有办法检测组件加载所需的时间。 React 在未来的版本中提出了异步渲染这个特性

标签： javascript reactjs settimeout

【解决方案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" />;
   }
}

【讨论】：

意味着使该组件成为基于类的组件没有任何逃避？
好吧，我不敢说实话。无论如何，我使我所有的组件类都基于。
@catandmouse 是的。组件应该有一个状态，因此它需要是一个类。