next.js项目如何实现同位素布局？答案

【问题标题】：How to implement the isotope-layout in next.js project?next.js项目如何实现同位素布局？
【发布时间】：2023-02-20 09:37:33
【问题描述】：

我想在 next.js 项目中实现同位素布局。为此，我尝试通过以下博客来做到这一点。 https://stackoverflow.com/questions/25135261/react-js-and-isotope-js 另外，这里是 codesandbox 链接。 https://codesandbox.io/s/react-isotope-typescript-i9x5v?file=/src/App.tsx:1152-1504 这适用于 React 项目。

但是当我在 next.js 项目中尝试时，我可以看到以下错误。

如果有人有解决方案，请帮助我！谢谢。

【问题讨论】：

【解决方案1】：

我也遇到了 Isotope 和 NextJS 的同样问题。最后我用了 https://github.com/ZitRos/react-xmasonry 并成功了。在状态中存储项目，添加您自己的过滤器按钮以更新状态，并在 XMasonary 中循环遍历项目。

这个演示页面将给出一个想法

【讨论】：