0

Мой компонент React "должен" рендерить немного HTML, а потом применять к нему jQuery-плагин.

import React from 'react';
import $ from 'jquery';
import 'owl.carousel';    

class Slider extends React.Component {
  componentDidMount() {
    this.$slider = $(this.sliderContainer);
    this.$slider.owlCarousel();
  }

  render() {
    const images = this.props.images;
    return (
      <div id="owl-slide"
           className="owl-carousel"
           ref={el => this.sliderContainer = el}>
        {images.map((img, index) => (
          <div key={index} className="item">
            <img alt="pic" src={img} />
          </div>
         ))}
      </div>
    );
 };
export default Slider;

Но вместо этого прямо в момент импорта плагина я получаю:

TypeError: Cannot read property 'fn' of undefined

  1709 |  * @todo Navigation plugin `next` and `prev`
  1710 |  * @public
  1711 |  */
> 1712 | $.fn.owlCarousel = function(option) {
  1713 |    var args = Array.prototype.slice.call(arguments, 1);
  1714 | 
  1715 |    return this.each(function() {

внутри componentDidMount $.fn определён. Подскажите, как в принципе это должно работать?

8
  • это 2 разных файла? если да, то подключен ли jquery в том месте где он вызывается? если заменить import $ на import jQuery например, что то изменился? 30 мар 2018 в 8:11
  • Это один файл и вывод ошибки. 30 мар 2018 в 8:24
  • у вас получается именованная функция. И $.fn.owlCarousel это имя функции? 30 мар 2018 в 8:41
  • Нет. Насколько я понимаю устройство jquery, fn - это метод $, который подключает сторонний плагин в виде нового метода $. Указанная строка - это место, где код плагина как раз пытается это сделать, но не находит $, несмотря на то, что он импротирован. Суть моего вопроса именно в том, что я не знаю, в чём я ошибся при импорте $, если так происходит. Вот здесь о способе создания плагинов $: habrahabr.ru/post/158235 30 мар 2018 в 10:34
  • owlCarousel это ведь ваша кастомная функция? 30 мар 2018 в 10:38

1 ответ 1

1

это не прямой ответ и наверное автору он уже не нужен, но возможно поможет найти ответ другим людям в случае подобных сообщений об ошибке. поскольку текст ошибки сообщает Cannot read property 'fn' of undefined, что означает, что он не может обратиться к свойству 'fn' неопределенного объекта (undefined), то предположить можно что надо определить сам объект или, если он уже где-то определен, то уже проблема с областью видимости переменных, потому в этом месте этого объекта нет. поскольку в данном случае происходит обращение к неопределенному объекту, то и свойств у него нет. у меня такие ошибки показывались именно в случае когда не было переменной или функции к которой обращался или она не была видна в конкретном месте.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.