4 votes

Comment puis-je utiliser mon plugin jquery dans Next.js ?

Je développe une application web en utilisant Next.js et j'aimerais utiliser jQuery dans Next.js. Mais je ne peux pas importer le plugin jquery. Veuillez vérifier mon code et m'aider.

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="stackoverflow.com//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>
    );
  }
}

8voto

karthikdivi Points 1251

Après avoir importé les plugins jQuery, ils s'enregistreront pour les événements onClick, et à ce moment-là, vous ne pouvez pas garantir que l'élément DOM actuel est prêt, les éléments peuvent être créés plus tard et être rafraîchis.

Une façon de résoudre ces problèmes est d'appeler le code jQuery qui effectue l'initialisation dans le fichier componentDidMount() et aussi dans componentDidUpdate() afin de s'assurer que les éléments du DOM sont présents avant que le plugin jQuery ne les enregistre.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X