Блог

Главная - Вопросы по программированию - Как я могу использовать внешнюю библиотеку js в следующем js?

Как я могу использовать внешнюю библиотеку js в следующем js?

#javascript #jquery #reactjs #next.js #bxslider

Вопрос:

Я пытаюсь добавить внешний bxslider js в свой проект nextjs. Все идет хорошо, кроме этого дела. Я добавил bxslider.js в head.tsx и он успешно добавлен в DOM, но когда я использую эту переменную bxsliderjs в файле /pages/index.tsx, она выдает мне эту ошибку.

 error ReferenceError: bxSlider is not defined

Может ли кто-нибудь сообщить мне, где я делаю что-то не так или как правильно использовать внешний js.

В /компоненте/head.tsx

     import NextHead from 'next/head';
    import { useRouter } from 'next/router';
    import React from 'react';
    import { MetaProps } from '../types/layout';

    const Head = ({ customMeta }: { customMeta?: MetaProps }): JSX.Element => {
      const router = useRouter();
      const meta: MetaProps = {
        title: 'Test'            
      };
    
      return (
        <NextHead>
          <title>{meta.title}</title>
          <meta content={meta.description} name="description" />              
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>    
          <script type="text/javascript" src="/js/bxslider.min.js"></script>
          
        </NextHead>
      );
    };
    
    export default Head;

В /компоненте/макет.tsx

 import React, { useState, useEffect } from 'react';
import { MetaProps } from '../types/layout';
import Link from 'next/link';
import Head from './Head';
import $ from "jquery";
import Navigation from './Navigation';


const Layout = ({ customMeta}: LayoutProps): JSX.Element => {
  const dispatch = useDispatch();
  const router = useRouter();
  
  useEffect(() => {

  })  

  return (
    <>
      <Head customMeta={customMeta} />
      <header>
        <div className="funeral-header esse-header">
          <div className="container">
            Text
          </div>
        </div>
      </header>
      <main>
        {children}
      </main>
    </>
  );
};

export default Layout;

И В pages/index.tsx

 import React, { Component, useEffect } from 'react';
import Layout from "components/Layout";
import $ from "jquery";


const Index = ({ props}) => {

  useEffect(() => {   
    
      $('.bxslider').bxSlider({
        auto: true,
        autoControls: true
      });
  }, [])

  return (
    <Layout>
      <div className="bxslider">
        <div><img src="https://cdn.vox-cdn.com/image1.jpg"/></div>
        <div><img src="https://cdn.vox-cdn.com/image2.jpg"/></div>
        <div><img src="https://cdn.vox-cdn.com/image3.jpg"/></div>
        <div><img src="https://cdn.vox-cdn.com/image4.jpg"/></div>
        <div><img src="https://cdn.vox-cdn.com/image5.jpg"/></div>
      </div>
    </Layout>
  )
}

export default Index;

Заранее большое спасибо

Комментарии:

1. Не имеет отношения к проблеме, но я настоятельно рекомендую вам не использовать jQuery с Next.js/React.

2. Спасибо за ответ, но не могли бы вы, пожалуйста, дать мне знать, как я могу это исправить

Метки: