在reactjs中使用时，bootstrap carousel不会在幻灯片之间切换

Question

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

我们需要添加一些东西来在reactjs上使用bootstrap carousel，因为carousel是bootstrap中的一个插件吗？其余的引导类（如btn，label等）在其余的反应组件中完美无缺。

来源：

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类等）但{{1部分将无法正常工作。 Javascript要求Carousel的{​​{1}}部分（其他Javascript组件不起作用Bootstrap，Bootstrap等。< / p>

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

以下是轮播的部分 - https://react-bootstrap.github.io/components.html#carousels

Answer 2

以您的方式需要bootstrap js，使用jquery即可。

这是解决问题的更好方法。并避免jquery脚本以react方式进行react-bootstrap。这里是示例：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到“轮播项目”

谢谢