Question

我试图在ReactJs中进行API调用时显示加载图像。请找到以下代码。当props.loading为true时，我想用spinner 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;
}

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

1 个答案: