Используйте плагин flexSlider jQuery в React - PullRequest
Новая
       28

Используйте плагин flexSlider jQuery в React

0 голосов
/ 06 мая 2019

Я пытаюсь использовать flexslider, плагин jQuery внутри компонента React.

это компонент: 

import React from 'react';
import Testimonial from './testimonial';
import testimonialData from '../API/testimonials.json';
import $ from 'jquery';
import '../flexslider/JS/jquery.flexslider';

class Testimonials extends React.Component {
    divRef;

    componentDidMount() {
        $(this.divRef).flexslider({
            animation: 'slide',
            controlNav: false
        });
    }
    shouldComponentUpdate() {
        return false;
    }

    setRef = (ref) => {
        this.divRef = ref;
    };

    render() {
        return (
            <div className="container mt-5 pt-2">
                <hr className="testimonials_hr" />
                <h1 className="text-center pb-5">Testimonials</h1>
                <div className="flexslider" ref={this.setRef}>
                    <ul class="slides">
                        {testimonialData.map((element) => <Testimonial id={element.id} {...element} />)}
                    </ul>
                </div>
            </div>
        );
    }
}

export default Testimonials;

Я установил jQuery, а также скачал файл jQuery.flexslider. Я сохранил его в папке src и импортирую в компонент для использования flexslider ().

Когда я компилирую, это показывает в браузере: 

./src/flexslider/JS/jquery.flexslider.js
  Line 25:  'DocumentTouch' is not defined  no-undef
  Line 199:  'MSGesture' is not defined      no-undef
  Line 521:  'MSGesture' is not defined      no-undef
  Line 1252:  'jQuery' is not defined         no-undef

Search for the keywords to learn more about each error.

Что я делаю не так?

Что мне нужно сделать, чтобы использовать Flexslider в компоненте React с помощью плагина jQuery?

1 Ответ

0 голосов
/ 06 мая 2019

flexslider необходимо, чтобы jQuery находился в глобальной области видимости (например, window), чтобы связать свои функции с объектом jQuery.

Одно возможное решение, которое приходит на ум, - это требовать их, как и любой обычный скрипт в html -файле: 

<!-- styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/flexslider.min.css" />

<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.7.2/jquery.flexslider-min.js"></script>

<!-- Scripts can also be loaded from local space if available in source directory -->

Другое решение, которое я нашел, - require плагин вместо import и определение jQuery и $ для window объекта: 

import React from "react";
import $ from 'jquery'; // jQuery import

import 'flexslider/flexslider.css'; // The styles if needed

window.jQuery = window.$ = $;
require('flexslider'); // This uses the NPM-package, but it can be replaced by the local file.
...