ReactJS实现API调用时在Bootstrap模态框中显示加载Spinner

我来帮你搞定这个问题！你现在的代码里，Bootstrap模态框默认是通过JS控制显示/隐藏的，直接渲染静态HTML的话，它会因为默认的类而处于隐藏状态。下面给你两种可行的解决方案：

解决方案1：原生Bootstrap手动调整显示状态 #

我们需要给模态框添加show和d-block类来强制显示它，同时补上模态框的背景遮罩层，这样就能正常展示加载 spinner 了：

render() { 
  let spinner; 
  // 简化条件判断
  if (this.props.loading) { 
    spinner = (
      <>
        {/* 添加模态框背景遮罩 */}
        <div className="modal-backdrop fade show"></div>
        <div className="modal fade show d-block" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
          <div className="modal-dialog modal-sm" role="document"> 
            {/* 调整modal-content的样式，让spinner居中 */}
            <div className="modal-content d-flex justify-content-center align-items-center p-4"> 
              {/* 去掉不必要的a标签，添加alt属性提升可访问性 */}
              <img src="Spinner/Spinner.svg" className="rounded" alt="加载中..." /> 
            </div> 
          </div> 
        </div>
      </>
    ); 
  } 
  return ( 
    <div> {spinner} </div> 
  ) 
}

关键调整点： #

• 给模态框添加show类：让模态框从隐藏变为显示状态
• 添加d-block类：覆盖Bootstrap默认的display: none样式
• 补上modal-backdrop：实现加载时的背景遮罩效果，阻止用户操作页面
• 优化了modal-content的布局，让spinner居中显示
• 移除了不需要的跳转链接，添加了图片alt属性

解决方案2：使用React Bootstrap组件（推荐） #

如果你想更贴合React的组件化开发方式，避免手动操作DOM类，推荐使用react-bootstrap库，它把Bootstrap的组件封装成了React组件，用起来更省心：

步骤1：安装依赖 #

npm install react-bootstrap bootstrap

步骤2：在你的组件中使用Modal组件 #

// 先导入需要的组件
import { Modal } from 'react-bootstrap';
// 别忘了导入Bootstrap的样式（可以在入口文件或者当前组件导入）
import 'bootstrap/dist/css/bootstrap.min.css';

class YourComponent extends React.Component {
  render() { 
    return ( 
      <div>
        <Modal
          // 直接用props.loading控制模态框的显示/隐藏
          show={this.props.loading || false}
          size="sm"
          // 让模态框在页面居中
          centered
          // 禁止点击背景关闭模态框
          backdrop="static"
          // 禁止按ESC键关闭模态框
          keyboard={false}
          aria-labelledby="loading-modal-label"
        >
          <Modal.Header closeButton={false}>
            {/* 可以添加标题，或者留空 */}
            <Modal.Title id="loading-modal-label">加载中...</Modal.Title>
          </Modal.Header>
          <Modal.Body className="d-flex justify-content-center">
            <img src="Spinner/Spinner.svg" className="rounded" alt="加载中..." />
          </Modal.Body>
        </Modal>
      </div> 
    ) 
  } 
}

优势： #

• 不需要手动管理模态框的类和状态，直接通过show属性控制显示
• 内置了很多实用属性（比如backdrop="static"），轻松实现加载场景的交互限制
• 代码更简洁，符合React的开发习惯

内容的提问来源于stack exchange，提问作者Karthikeyan