将jQuery插件集成到NextJS

哈里斯·帕帕达基斯（Haris Papadakis）

我正在尝试集成一个已有6年历史的jQuery插件，但我不能。

我尝试使用react-dom中的findDOMNode模块，甚至使用React Official Docs的方式来集成jQuery插件，但没有一个。

这是我的插件-> https://www.jqueryscript.net/layout/Fancy-Responsive-jQuery-Diamond-Layout-Plugin-diamonds-js.html

我遇到了一些错误，例如

TypeError：jquery__WEBPACK_IMPORTED_MODULE_8 ___ default（...）（...）。Diamonds不是函数

ReferenceError：窗口未定义//我收到此错误，因为库在最后一行使用了窗口

我还向您展示了用于初始化元素的代码段。

componentDidMount() {
  //   $(".diamondswrap").diamonds({
  //     size : 200, // Size of diamonds in pixels. Both width and height. 
  //     gap : 5, // Pixels between each square.
  //     hideIncompleteRow : false, // Hide last row if there are not enough items to fill it completely.
  //     autoRedraw : true, // Auto redraw diamonds when it detects resizing.
  //     itemSelector : ".item" // the css selector to use to select diamonds-items.
  // });

  if(typeof window !== 'undefined') {
    window.Diamonds = require('../assets/js/jquery.diamonds.js');
  }
  new Diamonds.Diamonds();
  }

谢谢，对不起我的英语！

都铎王朝

我创建了一个小Github存储库，您可以在其中查看：https : //github.com/tudorgergely/jquery-plugin-nextjs/

这是工作示例：https : //jquery-plugin-nextjs.now.sh/

基本上，您需要做一些事情，首先使用无ssr的动态代码来渲染jquery-diamonds：

const DynamicJqueryDiamonds = dynamic(
    () => import('../components/JqueryDiamonds'),
    { loading: () => <p>...</p>, ssr: false }
);

然后在该组件内部，在componentDidMount / useEffect中加载jquery / diamond：

    useEffect(() => {
        window.jQuery = require('../public/jquery-latest.min');
        window.Diamonds = require('../public/jquery.diamonds.js');

        window.jQuery("#demo").diamonds({
            size : 100, // Size of diamonds in pixels. Both width and height.
            gap : 5, // Pixels between each square.
            hideIncompleteRow : false, // Hide last row if there are not enough items to fill it completely.
            autoRedraw : true, // Auto redraw diamonds when it detects resizing.
            itemSelector : `.${styles.item}` // the css selector to use to select diamonds-items.
        });
    }, []);

最后，别忘了在页面/index.js中包含您的css：

例如：

export default function Index() {
    return (
        <div>
            <Head>
                <title>Test</title>
                <link href="/diamonds.css" rel="stylesheet" key="test"/>
            </Head>
            <DynamicJqueryDiamonds/>
        </div>
    );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。