импорт плагинов jquery не работает в приложении реакции

Question

Я пытаюсь импортировать плагин jquery flexslider в компоненте Slider.Но это дает мне ошибку "$ (this.el) .flexSlider () не является функцией".И в Моем текстовом редакторе он также показывает мне, что я могу изменить переменную flexSlider, но никогда не использую.

Я загружаю jquery в мой файл index.html, а также в мой компонент Slider.И в моем компоненте Slider в импортном flexslider, который я установил npm.

import React from 'react';
import $ from 'jquery';
import flexSlider from 'flexslider';

class Slider extends React.Component {
  componentDidMount(){
    this.$el = $(this.el);
    this.$el.flexSlider();
  }
  render(){
    return (
      <div className="slider" ref={el=> this.el = el}>
        {this.props.children}
      </div>
    )
  }
};

export default Slider;

Это дает мне ошибку "$ (this.el) .flexSlider () не является функцией"

Answer 1

Создайте один компонент jQuery, пример (components / Jquery.js:

import React from 'react'
import jQuery from 'jquery' // Import directly from node-modules
window.jQuery = jQuery

export default () => (jQuery)

) В своем компоненте вы будете использовать плагин jQuery, пример (компоненты / Slider.js):

import React, {Component} from 'react'
import $ from './Jquery' // Import component
import flexSlider from 'flexslider' // Import directly from node-modules

class Slider extends Component {
    componentDidMount() {
         $(".hero-slider").flexslider({
            controlNav: true,
            directionNav: false,
            animation: "fade"
        });
    }

    render = () => (
        <div className="hero hero-slider">
        <ul className="slides">
            <li data-bg-image="dummy/slider-1.jpg">
            <div className="container">
                         <h3 className="slider-subtitle">Your header goes here</h3>
            <h2 className="slider-title">Professional</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa molestiae necessitatibus possimus ducimus facere, error, nostrum. Quos sapiente ducimus maxime odio alias dolor consequuntur, maiores commodi exercitationem veniam. Id, ex?</p>
            <a href="#" className="button large">Read more</a>
            </div>
        </li>
                 <li data-bg-image="dummy/slider-2.jpg">
            <div className="container">
                <h3 className="slider-subtitle">Your header goes here</h3>
            <h2 className="slider-title">Professional</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In maiores illo eligendi obcaecati reiciendis, vel perspiciatis aliquid esse architecto deleniti asperiores, laboriosam nemo rerum! Ipsam numquam delectus minus iure sit!</p>
            <a href="#" className="button large">Read more</a>
            </div>
        </li>
        <li data-bg-image="dummy/slider-3.jpg">
            <div className="container">
            <h3 className="slider-subtitle">Your header goes here</h3>
            <h2 className="slider-title">Professional</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam iure, alias error suscipit porro quidem minus, autem repellendus rerum labore corrupti! Quia quas, architecto, quis non pariatur quisquam nisi magnam.</p>
            <a href="#" className="button large">Read more</a>
            </div>
        </li>
        </ul>
    </div>
    )
}

export default Slider

Просто пример. Поймите это, чтобы реализовать в своем коде.