ReactJS - 在 API 调用时显示加载图像 - 在 Bootstrap 的模式中

Question

我正在尝试在 ReactJs 中进行 API 调用时显示加载图像。请找到以下代码。 当 props.loading 为真时，我想用微调器 svg 显示 Bootstrap 的模态。但是那个微调器变量显示在哪里需要它。

它在没有 Bootstrap 的模态的情况下正常工作，但是，我想在 bootstrap 的模态中显示微调器。

render() {
     let spinner;
     if(this.props.loading != undefined )
         {
            if(this.props.loading)
                {
                    spinner = <div className="modal fade bs-example-modal-
                              sm" tabindex="-1" role="dialog" aria-
                          labelledby="mySmallModalLabel"> +
                                <div className="modal-dialog modal-sm" 
                          role="document"> +
                                <div className="modal-content"> +
                                <a href="#"><img src="Spinner/Spinner.svg" 
                          className="rounded mx-auto d-block" /></a> +
                                </div> +
                                </div> +
                                </div>;
                }
        }

        return
        (
            <div>
                {spinner}
            </div>
        }

    }

Answer 1

您应该在 else 部分取消微调器：

if(this.props.loading){
    spinner = <div className="modal fade bs-example-modal-
           sm" tabindex="-1" role="dialog" aria-
           labelledby="mySmallModalLabel"> +
           <div className="modal-dialog modal-sm" 
             role="document"> +
             <div className="modal-content"> +
             <a href="#"><img src="Spinner/Spinner.svg" 
             className="rounded mx-auto d-block" /></a> +
             </div> +
             </div> +
          </div>;
}else{
    spinner = null;
}