Question

我正在使用Next.js开发Web应用程序，我想在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插件？

1 个答案: