如何在车工操作员几秒钟后返回 jsx？

Question

我使用这样的车削操作员：

{
  typeof weather.data !== "undefined" ? (
    <React.Fragment>
      <div className="col-lg-6 col-md-6 col-sm-12 col-12 border">
        <Details
          temp={Math.round(weather.data.main.temp)}
          city={weather.data.name}
          country={weather.data.sys.country}
          date={dateBuilder}
          weather={weather.data.weather[0].main}
        />
      </div>
    </React.Fragment>
  ) : (
    setTimeout(() => {
      return (
        <div className="d-flex flex-column align-items-center w-100 font">
          <img style={{ width: "100px" }} src={require("./assets/wifi.png")} />
          <p className="mt-3">Please check your internet connection</p>
        </div>
      );
    }, 3000)
  );
}

问题是如果 typeof weather.data 等于 undefined 它不返回

请检查您的连接

3 秒后的部分基本上 setTimeout function 不起作用。

那么如何使用 setTimeout 在几秒钟后返回值？

Answer 1

我会使用超时来更新 state 中的标志以显示 JSX 元素

const connFail = () => {
    setTimeout(() => {
        this.setState({ connFail: true });
    }, 3000);
};

{
  typeof weather.data !== "undefined" && (
    <React.Fragment>
      <div className="col-lg-6 col-md-6 col-sm-12 col-12 border">
        <Details
          temp={Math.round(weather.data.main.temp)}
          city={weather.data.name}
          country={weather.data.sys.country}
          date={dateBuilder}
          weather={weather.data.weather[0].main}
        />
      </div>
    </React.Fragment>
  ) : connFail()
}
{
  this.state.connFail && (
    (
      <div className="d-flex flex-column align-items-center w-100 font">
        <img style={{ width: "100px" }} src={require("./assets/wifi.png")} />
        <p className="mt-3">Please check your internet connection</p>
      </div>
    );
  )
}