jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).owlCarousel 不是函数（React）

Question

我正在制作一个网络应用程序，我需要在其中实现猫头鹰旋转木马。

我的组件“TopEventSection.jsx”文件：

import React, { useEffect } from "react";
import img from "../images/date.svg";
import 'jquery';
import $ from 'jquery'
import 'owl.carousel'

export default function TopEventSection() {

    useEffect(() => {
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 5
                }
            }
        });
    }, []);

    return (
        <div className="top-event-section">
            <div className="container">
                <h2><span className="header-blue">ТОП</span> події:</h2>
                <div className="owl-carousel">
                    <div className="item"><img src={img} alt="img1" /></div>
                    <div className="item"><img src={img} alt="img2" /></div>
                    <div className="item"><img src={img} alt="img3" /></div>
                </div>
            </div>
        </div>
    )
}

我还检查了 package.json 中的这些依赖项。它们已安装。我还将 jquery 和 owl-carousel 导入到了 index.html 中：

  <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>
  <script src="owlcarousel/owl.carousel.min.js"></script> 

这些都不起作用......

Answer 1

我找到了解决方案。只需下载一个包“react-owl-carousel”（https://www.npmjs.com/package/react-owl-carousel）