React 17对接API加载相册时Isotope筛选失效、布局错乱问题求助

原全局执行的Isotope、MagnificPopup初始化逻辑和事件绑定时机不对：你写在main.js里的初始化代码是绑定window.load事件触发的，而API请求是异步执行的，当window.load触发时，请求还未返回，Gallery组件里还没有渲染出图片项和筛选按钮，初始化时找不到对应DOM元素，所以布局计算错误、筛选按钮没有绑定事件，才会出现堆叠、点击无响应的问题。偶尔刷新能正常是因为此时请求命中缓存或者响应速度极快，刚好在window.load触发前完成了数据返回和DOM渲染，初始化能找到对应元素。

1. 先删除main.js里对应的Isotope和MagnificPopup初始化代码，不要全局执行初始化，将初始化逻辑迁移到Gallery组件内部，在DOM确认渲染完成后再执行。
2. 给Gallery组件的图片容器加ref，避免使用全局选择器出现冲突，同时在组件生命周期中管理Isotope实例。
3. 监听Gallery组件的props变化，当图片数据加载完成、DOM更新后再执行初始化操作。

import React from "react";

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    // 创建ref获取图片容器DOM
    this.galleryContainerRef = React.createRef();
    // 存储Isotope实例方便后续操作和销毁
    this.isotopeInstance = null;
  }

  componentDidUpdate(prevProps) {
    // 仅当图片数据更新且数据不为空时执行初始化
    if (prevProps.items !== this.props.items && this.props.items.length > 0) {
      // setTimeout 0 等待React完成DOM渲染
      setTimeout(() => {
        const $container = $(this.galleryContainerRef.current);

        // 销毁旧实例避免重复初始化冲突
        if (this.isotopeInstance) {
          this.isotopeInstance.isotope('destroy');
          $('#gallery-flters li').off('click');
        }

        // 初始化MagnificPopup
        $container.magnificPopup({
          delegate: '.popimg',
          type: 'image',
          gallery: { enabled: true }
        });

        // 初始化Isotope
        this.isotopeInstance = $container.isotope({
          itemSelector: '.gallery-grid-item'
        });

        // 绑定筛选按钮点击事件，先解绑再绑定避免重复触发
        $('#gallery-flters li').on('click', function () {
          $("#gallery-flters li").removeClass('filter-active');
          $(this).addClass('filter-active');
          $container.isotope({
            filter: $(this).data('filter')
          });
        });

        // 若仍存在布局错位问题，可引入imagesLoaded插件，等图片加载完成后重新计算布局
        // $container.imagesLoaded().progress(() => {
        //   $container.isotope('layout');
        // });
      }, 0);
    }
  }

  componentWillUnmount() {
    // 组件卸载时销毁实例、解绑事件，避免内存泄漏
    if (this.isotopeInstance) {
      this.isotopeInstance.isotope('destroy');
    }
    $('#gallery-flters li').off('click');
  }

  render() {
    const { descs, items, filters } = this.props;
    return (
      <section id="gallery" class="gallery-area section-padding">
        <div class="container">
          {/* 原有标题、筛选器渲染逻辑不变 */}
          <div class="row">
            {/* 筛选器代码省略，和原有逻辑一致 */}
            <div class="gallery-container" ref={this.galleryContainerRef}>
              {/* 渲染图片列表 */}
              {items.map(item => (
                <div 
                  key={item.id} 
                  className={`col-lg-4 col-md-6 gallery-grid-item ${item.category}`}
                >
                  {/* 图片内容和原有硬编码结构一致 */}
                  <div class="gallery-item">
                    <img src={item.imgUrl} alt={item.alt} />
                    <div class="gallery-img-overlay">
                      <div class="gallery-content">
                        <div class="info">
                          <h6>{item.title}</h6>
                        </div>
                        <a href={item.imgUrl} class="popimg">
                          <span class="icon"><i class="icofont-picture"></i></span>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    )
  }
}

export default Gallery;

• 渲染图片项时必须加唯一key，避免React DOM复用异常
• 如果你的Gallery组件是函数组件，可以用useEffect、useRef实现相同的生命周期逻辑
• 不需要更换现有jQuery版本的Isotope和MagnificPopup库，调整初始化时机即可正常运行

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