在 React 中使用 flexslider jQuery 插件

Question

我正在尝试使用 flexslider，这是 React 组件中的一个 jQuery 插件。

这是组件：

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.

我做错了什么？

要使用 jQuery 插件在 React 组件中使用 Flexslider，我需要做什么？

Answer 1

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 并在 window 对象上定义 jQuery 和 $：

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.

在 React 中使用 flexslider jQuery 插件

Use flexslider jQuery plugin in React

jquery

flexslider

reactjs