时间戳

首页 > 解决方案 > React.JS 组件中的 BxSlider

jquery - React.JS 组件中的 BxSlider

问题描述

我正在尝试在 React 组件中运行 bxSlider。已经安装jQuery在项目中导入了 jQuery 的 App.js 文件中。import $ from 'jquery'. 按照这个通过 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>

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'

标签： jqueryreactjsimportbxslider

解决方案

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

我刚刚在我的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使用

推荐阅读