如何在 Next.js 中使用我的 jquery 插件？

Question

我正在使用 Next.js 开发网络应用程序，我想在 Next.js 中使用 jQuery。但是我无法导入 jquery 插件。请检查我的代码并帮助我。


import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App => props => sheet.collectStyles(<App {...props} />));
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }

  render() {
    return (
      <html lang="en">
        <Head>{this.props.styleTags}
          <link
            href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0/katex.min.css"
            rel="stylesheet"
          />
         <script src="../static/js/jquery.main.js" async/>
        </Head>
        <body>
          <Main />
          <div id="modal" />
          <NextScript />
        </body>
      </html>
    );
  }
}

Answer 1

如果您这样做 jQuery，您将遇到的一个典型问题是，在导入 jQuery 插件后，它们将注册 onClick 事件，到那时您无法保证实际DOM 元素已准备就绪，稍后可能会创建元素并刷新。

解决问题的一种方法是调用 jQuery 代码，该代码在 componentDidMount() 和 componentDidUpdate() 中进行初始化，这样您就可以确保 DOM元素在 jQuery 插件注册它们之前存在。

如何在 Next.js 中使用我的 jquery 插件？

How I can use my jquery plugin in Next.js?

import

hyperlink

jquery-plugins

reload

next.js