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), то предположить можно что надо определить сам объект или, если он уже где-то определен, то уже проблема с областью видимости переменных, потому в этом месте этого объекта нет. поскольку в данном случае происходит обращение к неопределенному объекту, то и свойств у него нет. у меня такие ошибки показывались именно в случае когда не было переменной или функции к которой обращался или она не была видна в конкретном месте.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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