nextjs - 使用动态导入正确初始化砖石布局

Question

我正在尝试在 nextjs 中创建一些仪表板 - 并且我已经启动了一个带有砖石布局的项目 - 但我似乎无法让它初始化。

我尝试在 useEffect 中设置它 - 但它没有做任何事情。

https://codesandbox.io/p/devbox/ldpqcx

"use client";
import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";

export default function MasonryUI() {
  const msnry = "";

  useEffect(() => {
    const Masonry = dynamic(() => import("masonry-layout"), { ssr: false });
    var msnry = new Masonry(".grid", {
      itemSelector: ".grid-item",
      columnWidth: 200,
    });
    console.log("msnry", msnry);
  }, [msnry]);

  return (
    <>
      <h1>Masonry - columnWidth</h1>

      <div className="grid">
        <div className="grid-item"></div>
        <div className="grid-item grid-item--width2 grid-item--height2"></div>
        <div className="grid-item grid-item--height3"></div>
        <div className="grid-item grid-item--height2"></div>
        <div className="grid-item grid-item--width3"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item grid-item--height2"></div>
        <div className="grid-item grid-item--width2 grid-item--height3"></div>
        <div className="grid-item"></div>
        <div className="grid-item grid-item--height2"></div>
        <div className="grid-item"></div>
        <div className="grid-item grid-item--width2 grid-item--height2"></div>
        <div className="grid-item grid-item--width2"></div>
        <div className="grid-item"></div>
        <div className="grid-item grid-item--height2"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item grid-item--height3"></div>
        <div className="grid-item grid-item--height2"></div>
        <div className="grid-item"></div>
        <div className="grid-item"></div>
        <div className="grid-item grid-item--height2"></div>
      </div>
    </>
  );
}

---

这没有影响

import Masonry from "masonry-layout"; // Direct import of Masonry

export default function MasonryUI() {
  useEffect(() => {
    if (typeof window !== "undefined") {
      const element = document.querySelector(".grid");
      if (element) {
        const masonryInstance = new Masonry(element, {
          itemSelector: ".grid-item",
          columnWidth: 200,
        });
        console.log("masonryInstance", masonryInstance);
      }
    }
  }, []); // Not any need it's unnecessary

Answer 1

这似乎是解决方案

-- main 上有一堂课 -- 使用常规实例和砌体导入 -- 创建了一个类型

https://codesandbox.io/p/devbox/affectionate-dijkstra-forked-kvwplk

"use client";

import React, { useState, useEffect } from "react";
import Masonry from "masonry-layout"; // Direct import of Masonry

export default function MasonryUI() {
  useEffect(() => {
    var element = document.querySelector(".grid");
    if (element) {
      const masonryInstance = new Masonry(element, {
        itemSelector: ".grid-item",
        columnWidth: 200,
      });
      console.log("masonryInstance", masonryInstance);
    }
  }, []); // Removed msnry dependency as it's unnecessary

  return (
    <>
      <h1>Masonry - columnWidth</h1>

      <div className="grid" style={{ border: "2px solid black" }}>
        <div className="grid-item">Hi there</div>
        <div className="grid-item grid-item--width2 grid-item--height2">
          Hi there
        </div>
        <div className="grid-item grid-item--height3">Hi there</div>
        <div className="grid-item grid-item--height2">Hi there</div>
        <div className="grid-item grid-item--width3">Hi there</div>
        <div className="grid-item">Hi there</div>
        <div className="grid-item">Hi there</div>
        <div className="grid-item grid-item--height2">Hi there</div>
        <div className="grid-item grid-item--width2 grid-item--height3">
          Hi there
        </div>
        <div className="grid-item">Hi there</div>
        <div className="grid-item grid-item--height2">Hi there</div>
        <div className="grid-item">Hi there</div>
        <div className="grid-item grid-item--width2 grid-item--height2">
          Hi there
        </div>
        <div className="grid-item grid-item--width2">Hi there</div>
        <div className="grid-item">Hi there</div>
        <div className="grid-item grid-item--height2">Hi there</div>
        <div className="grid-item">Hi there</div>
        <div className="grid-item">Hi there</div>
        <div className="grid-item grid-item--height3">Neil</div>
        <div className="grid-item grid-item--height2">Petal</div>
        <div className="grid-item">Hello</div>
        <div className="grid-item">John</div>
        <div className="grid-item grid-item--height2"></div>
      </div>
    </>
  );
}

同时创建一个类型

// types/masonry-layout.d.ts
declare module "masonry-layout" {
  export default class Masonry {
    constructor(element: Element, options?: MasonryOptions);
    layout(): void;
    reloadItems(): void;
    destroy(): void;
  }

  interface MasonryOptions {
    itemSelector?: string;
    columnWidth?: number | string | Element;
    gutter?: number;
    percentPosition?: boolean;
    stamp?: string;
    fitWidth?: boolean;
    originLeft?: boolean;
    originTop?: boolean;
    transitionDuration?: string;
    resize?: boolean;
    initLayout?: boolean;
  }
}