Question

我使用create-react-app创建了应用程序。我在组件中导入了模块jquery，也在owl.carousel中导入了它，但是为什么它显示错误。

这是组件代码

import React,{Component} from 'react';

import $ from '../../../node_modules/jquery/dist/jquery.min'
import '../../../node_modules/owl.carousel/dist/owl.carousel'

import '../../../node_modules/owl.carousel/dist/assets/owl.carousel.min.css'

class Header extends Component{

    componentDidMount() {
    }

    render(){
        return(
            <div className="owl-carousel">
                <div>Content 1</div>
                <div>Content 2</div>
                <div>Content 3</div>
                <div>Content 4</div>
                <div>Content 5</div>
                <div>Content 6</div>
                <div>Content 7</div>
            </div>
        )
    }
}

无法读取undefined的属性。 Error screenshot

Answer 1

您可以从屏幕截图中看到Owl期待zepto或jQuery在window上。当您导入某些内容时，它仅在该模块的范围内可用，而不是window。

有几种方法可以解决这个问题：

选项1：在public/index.html中包含jQuery我建议使用cdn

选项2：导入jQuery，放入窗口，然后导入owl

// note: you don't need the whole path to node_modules.. just the package name
import jQuery from 'jquery'

window.jQuery = jQuery

// dynamically require owl
require('owl.carousel')

注意：import语句需要在require语句

之前进行

选项3（最佳选项）：

只需使用react-owl-carousel包，或使用不需要jQuery的其他carousel包。这几天，无论是将jQuery导入反应以使用非反应包都是不必要的。

反应owl.carousel $未定义

1 个答案: