React.JS 组件中的 BxSlider

Question

我正在尝试运行 React 组件中的 bxSlider。在 App.js 文件中导入 jQuery 的项目中安装了 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 is not defined:

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

BxSlider in React.JS component

import

jquery

bxslider

reactjs