Question

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

步骤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>

步骤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>

步骤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'

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

React.JS组件中的BxSlider

1 个答案: