如何在next.js项目中实现同位素布局？

Question

我想在 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 项目中尝试时，我可以看到以下错误。

如果有人有解决办法，请帮助我！ 谢谢。

Answer 1

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

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

https://github.com/ZitRos/react-xmasonry/blob/master/docs/jsx/ContentChangesDemo.jsx