React.JS组件中的 BxSlider

Question

我正在尝试在 React 组件中运行 bxSlider。在应用程序中安装了jQuery导入的 jQuery.js 文件。import $ from 'jquery'. 按照这个通过 npm 安装 bxSlider。

步骤-1 (在索引中添加了以下行.html

<link rel="stylesheet" href="/node_modules/bxslider/dist/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="/node_modules/bxslider/dist/jquery.bxslider.min.js"></script>

步骤-2(在应用中添加了以下行.jsrender()

<ul class="bxslider">
<li><img src="/images/pic1.jpg" /></li>
<li><img src="/images/pic2.jpg" /></li>
<li><img src="/images/pic3.jpg" /></li>
<li><img src="/images/pic4.jpg" /></li>
</ul>

步骤-3(在应用中添加了以下行.jscomponentDidMount()

$(document).ready(function(){
$('.bxslider').bxSlider();
});

显示错误：

TypeError: jquery__WEBPACK_IMPORTED_MODULE_3___default(...)(...).bxSlider is not a function

请告知我在这里缺少什么。 我也尝试直接导入，然后显示未定义jquery：

import '../../../node_modules/bxslider/dist/jquery.bxslider'

Answer 1

我成功地让它在我的应用程序中工作，但很难在代码沙箱中向您展示

我只是在我的index.html中添加了这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script>
$(document).ready(function() {
$('.slider').bxSlider()
})
</script>

和我的App.js中的这段代码

<div className="slider">
<div>I am a slide.</div>
<div>I am another slide.</div>
</div>

我让它工作，另一种解决方案是改用react-slick