setTimeout 后如何 return jsx

Question

我有一个加载状态，我只想在加载时间超过 1 秒时显示（因为即使加载时间只有几毫秒，我也不想继续显示加载程序）。

这是无论加载速度如何都显示加载器的那个：

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

这是设置超时的那个：

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

我知道 return 声明适用于 setTimeout 而不是它不起作用的组件。

然后我是否应该先创建一个状态（例如 isLoadingSlow），我将在 setTimeout 回调中 1 秒后将其更改为 true？然后基于那个状态，然后我会用加载器 jsx 做一个 return 语句？

Answer 1

注意：这是根据从 post 中删除的答案编写的答案。

我觉得你需要有两个变量，一个是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" />;
   }
}

setTimeout 后如何 return jsx

How to return jsx after setTimeout

javascript

settimeout

reactjs