猫头鹰轮播 - 类型错误：无法读取未定义的属性“fn”答案

【问题标题】：Owl-carousel - TypeError: Cannot read property 'fn' of undefined猫头鹰轮播 - 类型错误：无法读取未定义的属性“fn”
【发布时间】：2020-02-09 07:05:59
【问题描述】：

我尝试在我的 react 应用程序中使用 owl.carousel 包。我用 npm 安装了 jquery 和 owl.carousel 包。

npm install jquery owl.carousel

在 App.js 中

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


componentDidMount() {
$('.team-slides').owlCarousel({
// my options
});
}

我收到错误消息

TypeError: Cannot read property 'fn' of undefined.
/owl.carousel/dist/owl.carousel.js:1718

  1715 |  * @todo Navigation plugin `next` and `prev`
  1716 |  * @public
  1717 |  */
> 1718 | $.fn.owlCarousel = function(option) {
       | ^  1719 |  var args = Array.prototype.slice.call(arguments, 1);
  1720 | 
  1721 |    return this.each(function() {

请帮我解决这个问题。

【问题讨论】：

标签： jquery reactjs create-react-app owl-carousel

【解决方案1】：

您必须将这些包含在您的index.html 中

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>


  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

【讨论】：

但是如果你已经安装了 jquery 怎么办？为什么要从 CDN 引用？

【解决方案2】：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

这个就够了试试这个脚本我希望你的轮播能正常工作..

【讨论】：