在 reactjs 中使用时，引导轮播不会在幻灯片之间切换

Question

我有以下 reactjs 组件，它尝试加载引导轮播。但是轮播导航不起作用，只显示第一个图像。我已经验证了第二张和第三张图片也存在于正确的路径中（通过使它们成为第一张图片）。

我们需要添加什么来在 reactjs 上使用 bootstrap carousel，因为 carousel 是 bootstrap 中的一个插件？其余的引导类（如 btn、标签等）在其余的 react 组件中工作得完美无缺。

来源：

import React from 'react'

class LandingPage extends React.Component {
  render() {
    return (
      <div className="container">
        <div id="myCarousel" className="carousel slide" data-ride="carousel">
          <ol className="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" className="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
          </ol>

          <div className="carousel-inner">

            <div className="item active">
              <img src={require("../images/pexels-photo-112640.jpeg")} alt="Chicago" className="landing-page-image" />

              <div className="carousel-caption">
                <h3>Chicago</h3>
                <p>Thank you, Chicago!</p>
              </div>
            </div>

            <div className="item">
              <img src={require("../images/pexels-photo-110473.jpeg")} alt="Los Angeles" className="landing-page-image" />

              <div className="carousel-caption">
                <h3>Los Angeles</h3>
                <p>LA is always so much fun!</p>
              </div>
            </div>

            <div className="item">
              <img src={require("../images/pexels-photo.jpg")} alt="New York" className="landing-page-image" />
              <div className="carousel-caption">
                <h3>New York</h3>
                <p>We love the Big Apple!</p>
              </div>
            </div>

          </div>

          <a className="left carousel-control" href="#myCarousel" data-slide="prev">
            <span className="glyphicon glyphicon-chevron-left"></span>
            <span className="sr-only">Previous</span>
          </a>
          <a className="right carousel-control" href="#myCarousel" data-slide="next">
            <span className="glyphicon glyphicon-chevron-right"></span>
            <span className="sr-only">Next</span>
          </a>
        </div>
      </div>
    );
  }
}

export default LandingPage

我的 index.js 中 bootstrap 的导入如下：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/css/bootstrap-theme.css'

复制轮播代码的教程（并将“class”更改为“className”）可在以下位置获得：https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Answer 1

问题出现是因为Bootstrap 也有一个Javascript 组件，它与React 发生冲突。您可以很好地使用Bootstrap's CSS 功能（例如带有col-md-* 的网格系统、btn、label 您提到的类等），但Javascript 部分不起作用。而Carousel 需要Bootstrap 的Javascript 部分（其他不起作用的Bootstrap 组件是Modal、Navbar 等）。

要解决此问题，您应该使用React-Bootstrap - Bootstrap 编写的组件React - https://react-bootstrap.github.io/。

这里是轮播部分 - https://react-bootstrap.github.io/components/carousel/

Answer 2

以你的方式需要bootstrap js，它的工作使用 jquery。

这是解决问题的更好方法。并避免 jquery 脚本在反应方式上反应引导。这里的例子：carousel/#example

<Carousel>
  <Carousel.Item>
   <img src={require("../images/pexels-photo-112640.jpeg")} alt="Chicago" className="landing-page-image" />
    <Carousel.Caption>
       <h3>New York</h3>
       <p>We love the Big Apple!</p>
    </Carousel.Caption>
  </Carousel.Item>

  <Carousel.Item>
    // your slide image 
    <Carousel.Caption>
       //....... your content
    </Carousel.Caption>
  </Carousel.Item>
</Carousel>

注意：<Carousel> 即时创建 .carousel 元素和 Carousel.Item 到 'carousel-item'

谢谢