Question

尝试使用缩略图创建轮播。单击缩略图图像时，需要调用轮播功能。

import $ from 'jquery';
import 'react-bootstrap'

function changeSlide(){
 $('[id^=carousel-selector-]').click(function () {
  var id_selector = $(this).attr("id");
  try {
   var id = /-(\d+)$/.exec(id_selector)[1];
   console.log(id_selector, id);
  $('#myCarousel').carousel(parseInt(id));
  } catch (e) {
    console.log(e);
  }
});
module.exports.changeSlide = changeSlide;

现在点击缩略图时我收到控制台错误

TypeError: (0 , _jquery2.default)(...).carousel is not a function
 at HTMLAnchorElement.<anonymous> (scripts.js:21)
 at HTMLAnchorElement.dispatch (jquery.js:5206)
 at HTMLAnchorElement.elemData.handle (jquery.js:5014)

Answer 1

react-bootstrap不依赖于jQuery，你的组件由React而不是jQuery提供支持。

Bootstrap分为两部分：CSS和JS。 JS部分用于处理用户与组件的交互。传统上，人们将使用Bootstrap的CSS：

使用jQuery OR的Bootstrap JS
使用React的react-bootstrap

jQuery和React都旨在响应用户交互并应用相应的DOM操作。你通常不应该将它们混合在一个组件中。

您应该只需按照示例代码https://react-bootstrap.github.io/components.html#carousels

无法在react-bootstrap中调用Carousel frunction

1 个答案: