Интеграция jQuery плагина в NextJS - PullRequest
Новая
       11

Интеграция jQuery плагина в NextJS

0 голосов
/ 04 апреля 2020

Я пытаюсь интегрировать шестилетний плагин jQuery, но не могу.

Я пытался использовать модуль findDOMNode изact-dom, даже тогда 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: окно не определено // Я получаю эту ошибку потому что библиотека использует windows в последней строке

Я также показываю вам мой фрагмент, который я использую для инициализации элемента. 

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();
  }

Спасибо, и извините за мой английский sh!

1 Ответ

1 голос
/ 05 апреля 2020

Я создал небольшое репозиторий Github, где вы можете посмотреть: https://github.com/tudorgergely/jquery-plugin-nextjs/

Вот рабочая демонстрация: https://jquery-plugin-nextjs.now.sh/

В основном вам нужна пара вещей: сначала используйте динамический c без ssr для рендеринга компонента jquery -diamonds: 

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

Затем внутри этого компонента загрузите jquery / diamonds в componentDidMount / useEffect: 

    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.
        });
    }, []);

и, наконец, не забудьте указать свои css внутри страниц / индекса. js:

например: 

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