无法在 react-bootstrap 中调用 Carousel 函数答案

【问题标题】：Not able call Carousel frunction in react-bootstrap无法在 react-bootstrap 中调用 Carousel 函数
【发布时间】：2017-03-26 04:08:06
【问题描述】：

尝试创建带有缩略图的轮播。点击缩略图时需要调用轮播函数。

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)

【问题讨论】：

标签： javascript jquery twitter-bootstrap reactjs react-bootstrap

【解决方案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

【讨论】：