css - 在React完成请求之前，如何显示内容？

我正在使用ReactJS创建一个网站，希望页面在从端点获取数据时（例如慢速连接），其内容看起来像下面那样。我正在寻找一种可以轻松地在元素p加载数据时对其实施的解决方案。



我将如何实施呢？

最佳答案

我可能会创建一个看起来像您在问题中提供的屏幕截图的组件或一个看起来像您喜欢的图像的组件。并做这样的事情。

state = {
  isFetching: true,
  data: {},
  isError: false
}

componentDidMount() {
  //doing the fetch
  fetch('api').then(
    response => {
       this.setState({ data: response.json(), isFetching: false });//finish with fetch
    },
    error => {
       this.setState({ isError: true, isFetching: false });//finish with fetch but error
    }
  );
}

render() {
  if(this.state.isFetching)
    return <CustomLoadingComponent />;


  return(
    <div>
      whatever you wanna show!
    </div>
  )
}

因此，如果要进行获取，则加载自定义加载组件，然后在数据返回时执行您想做的任何事情。

关于css - 在React完成请求之前，如何显示内容？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49905572/