React.JS组件中的BxSlider

Question

我正在尝试在React组件中运行bxSlider。在已导入App.js文件的jQuery项目中安装了jQuery。 import $ from 'jquery'。遵循this通过npm安装bxSlider。

Step-1）在index.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>
Step-2）在App.js render()中添加了以下几行：>
<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>
Step-3）在App.js componentDidMount()中添加了以下几行>
$(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'

我正在尝试在React组件中运行bxSlider。已经在项目中安装了jQuery，并在App.js文件中导入了jQuery。从'jquery'导入$。接下来通过npm安装bxSlider。 Step -...

我成功地使其在我的应用程序中运行，但是很难在代码沙箱中向您展示

我刚刚在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

Answer 1

我成功地使其在我的应用程序中运行，但是很难在代码沙箱中向您展示