React中Masonry布局仅在VS Code编辑保存后生效的问题求助

核心问题分析 #

你当前的代码存在两个关键问题：

1. 直接在组件函数内调用document.querySelector(".grid_")时，JSX还未渲染到DOM，无法获取到目标元素，导致Masonry初始化失败。
2. 自定义的Masonry组件未被实际使用，且即便使用了动态插入脚本的方式，也没有等待脚本加载完成就初始化Masonry。

修复方案（基于npm安装的Masonry） #

直接移除无用的自定义Masonry组件，修改PortfolioPortrait的代码，利用React的useRef和useEffect确保DOM渲染完成后再初始化Masonry，同时处理图片加载后的布局更新：

import React, { useEffect, useRef } from "react";
import Masonry from "masonry-layout";

const PortfolioPortrait = () => {
  const gridRef = useRef(null);
  const masonryInstance = useRef(null);

  const imgListFirst = [...new Array(10)].map(
    (_, index) => `/photos/photowalk/photowalk (${index + 1}).jpg`
  );

  useEffect(() => {
    // 确保grid元素已挂载到DOM
    if (!gridRef.current) return;

    // 初始化Masonry
    masonryInstance.current = new Masonry(gridRef.current, {
      itemSelector: ".grid-item",
      columnWidth: ".grid-sizer",
      percentPosition: true,
    });

    // 图片加载完成后重新布局（解决图片高度未加载导致的布局错乱）
    const handleImageLoad = () => {
      masonryInstance.current?.layout();
    };

    const images = gridRef.current.querySelectorAll("img");
    images.forEach(img => {
      if (img.complete) {
        handleImageLoad();
      } else {
        img.addEventListener("load", handleImageLoad);
      }
    });

    // 组件卸载时清理Masonry实例和事件监听
    return () => {
      masonryInstance.current?.destroy();
      images.forEach(img => img.removeEventListener("load", handleImageLoad));
    };
  }, []); // 空依赖数组确保仅在组件挂载时执行一次

  return (
    <div className="grid_" ref={gridRef}>
      <div className="grid-sizer"></div>
      {imgListFirst.map((imgUrl, index) => (
        <div key={index} className="grid-item">
          <img src={imgUrl} alt="collection" />
        </div>
      ))}
    </div>
  );
};

export default PortfolioPortrait;

关键优化点说明 #

• 使用useRef获取DOM元素：避免直接querySelector的时机问题，确保能拿到已渲染的grid节点。
• useEffect空依赖数组：保证Masonry只在组件初始挂载时初始化一次，解决初始加载无效的问题。
• 图片加载监听：图片加载完成后调用layout()方法，修正因图片未加载导致的布局错位。
• 清理函数：销毁Masonry实例并移除事件监听，防止内存泄漏。

配套样式检查 #

确保.grid-sizer和.grid-item的宽度设置正确（以四列布局为例）：

.grid_ {
  width: 100%;
}
.grid-sizer {
  width: 25%;
}
.grid-item {
  width: 25%;
  margin-bottom: 12px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .grid-sizer, .grid-item {
    width: 50%;
  }
}

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