React中Bootstrap 5 Modal内图片懒加载实现问题咨询

当前实现中Modal的完整DOM结构在组件首次渲染时就已挂载到页面，<img>标签只要存在src属性就会自动触发资源加载，和模态框是否可见无关，因此会产生大量无效请求。

通过React状态控制模态框的显隐，仅在模态框打开时才渲染图片DOM，从根源避免无效加载。同时注意多组件复用时要给每个模态框设置唯一ID，避免选择器冲突。

修改后代码示例 #

import { useState, useMemo } from 'react';

function YourComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 每个组件实例生成唯一ID，避免多实例冲突
  const modalId = useMemo(() => `modal-${Math.random().toString(36).slice(2)}`, []);

  return (
    <div>
      {/* 打开模态框按钮 */}
      <button 
        type="button" 
        className="btn btn-primary" 
        onClick={() => setIsModalOpen(true)}
      >
        Launch demo modal
      </button>

      {/* 模态框 */}
      <div 
        className={`modal fade ${isModalOpen ? 'show d-block' : ''}`} 
        id={modalId} 
        tabIndex={-1} 
        aria-labelledby="exampleModalLabel" 
        aria-hidden={!isModalOpen}
        onClick={(e) => e.target === e.currentTarget && setIsModalOpen(false)}
      >
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button 
                type="button" 
                className="btn-close" 
                aria-label="Close" 
                onClick={() => setIsModalOpen(false)}
              />
            </div>
            <div className="modal-body">
              {/* 仅模态框打开时渲染图片 */}
              {isModalOpen && <img src={dog} alt="dog image" className="my-image"/>}
            </div>
            <div className="modal-footer">
              <button 
                type="button" 
                className="btn btn-secondary" 
                onClick={() => setIsModalOpen(false)}
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
      {/* 模态框遮罩，和Bootstrap原生样式对齐 */}
      {isModalOpen && <div className="modal-backdrop fade show"></div>}
    </div>
  );
}

如果你不想修改原有的Bootstrap原生模态框控制逻辑，也可以延迟赋值图片src属性：

import { useState } from 'react';

function YourComponent() {
  const [imgSrc, setImgSrc] = useState('');

  return (
    <div>
      {/* 给打开按钮加点击事件，点击时再赋值图片地址 */}
      <button 
        type="button" 
        className="btn btn-primary" 
        data-bs-toggle="modal" 
        data-bs-target="#exampleModal"
        onClick={() => setImgSrc(dog)}
      >
        Launch demo modal
      </button>

      {/* Modal */}
      <div className="modal fade" id="exampleModal" tabIndex={-1} aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" />
            </div>
            <div className="modal-body">
               <img src={imgSrc} alt="dog image" className="my-image"/>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Nguyễn Tuấn Kiệt