javascript - 如何使用 React 在发布请求期间创建加载栏

Question

我正在使用 post 请求获取数据的 reactjs 元素。我收到回复，在此期间我想显示加载栏，我能够使用正常文本显示加载栏，效果很好。我想要一个 gif 微调器被当前的“正在加载..”文本替换我如何实现这个？

let postData = { UserId: feedId }; 
    this.setState({ loading: "Loading..." }); // set laoding text to loading 
    
    if (feedId)
    {
      PostData('UserDetails', postData).then((result) => {
        
        let responseJson = result;
        this.setState({loading: ""}); // set loadingtext as empty
        
        this.setState({Userdata: responseJson.UserList});
        console.log(responseJson.UserList);
      });
     }

Answer 1

您可以为状态的加载属性使用一个 bool 值，然后在您的渲染方法中有条件地渲染微调器:

class MyComponent extends Component {

  ...

  render() {
    return (
      this.state.loading 
        ? <Spinner />
        : <OtherComponent />
    )
  }

}