引导轮播按钮在我的react.js应用程序中不起作用

Question

我尝试在反应组件中使用引导轮播，但我在下一个和上一个按钮中遇到问题。 尽管自动滑动到下一个项目可以正常工作并且图像显示正确。 指示灯按钮也不起作用

这是我的组件代码：

图像是包含路径和标题的对象数组

import "./ImageSlider.css";

function ImageSlider({ images }) {
  const rows = [];
  for (let i = 1; i < images.length; i++)
    rows.push(
      <button
        key={i}
        type="button"
        data-bs-target="#ImageSlider"
        data-bs-slide-to={i}
        aria-label={`Slide ${i + 1}`}
      ></button>
    );
  return (
    <div id="ImageSlider" className="carousel slide" data-bs-ride="carousel">
      <div className="carousel-indicators">
        <button
          type="button"
          data-bs-target="#ImageSlider"
          data-bs-slide-to="0"
          className="active"
          aria-current="true"
          aria-label="Slide 1"
        ></button>
        {rows}
      </div>
      <div className="carousel-inner">
        {images.map((e, index) => {
          return (
            <div
              className={`carousel-item ${index === 0 ? "active" : ""}`}
              key={index}
            >
              <img
                src={e.Path}
                className="d-block w-100 ProjectImage justify-content-center align-items-center"
                alt={e.Caption}
              />
              <div className="carousel-caption d-none d-md-block">
                <p>{e.Caption}</p>
              </div>
            </div>
          );
        })}
      </div>
      <button
        className="carousel-control-prev"
        type="button"
        data-bs-target="#ImageSlider"
        data-bs-slide="prev"
      >
        <span className="carousel-control-prev-icon" aria-hidden="true"></span>
        <span className="visually-hidden">Previous</span>
      </button>
      <button
        className="carousel-control-next"
        type="button"
        data-bs-target="#ImageSlider"
        data-bs-slide="next"
      >
        <span className="carousel-control-next-icon" aria-hidden="true"></span>
        <span className="visually-hidden">Next</span>
      </button>
    </div>
  );
}

export default ImageSlider;

我在index.html中使用了cdn

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  

Answer 1

来自 Bootstrap 文档：

虽然 Bootstrap CSS 可以与任何框架一起使用，但 Bootstrap JavaScript 与 React、Vue 和 Angular 等 JavaScript 框架并不完全兼容，这些框架假定完全了解 DOM。 Bootstrap 和框架都可能尝试改变相同的 DOM 元素，从而导致诸如下拉菜单卡在“打开”位置的错误。

您将需要使用特定于框架的包。在你的情况下，它将是React Bootstrap。