使用 Bootstrap 反应 Typescript - 折叠不起作用

Question

我有一个带有 Bootstrap 5 的 React TypeScript 应用程序。该应用程序是使用

create-react-app

创建的，并且 Bootstrap 是使用

npm i bootstrap

安装的。

该应用程序使用按钮来切换某些内容的可见性（直接从https://getbootstrap.com/docs/5.3/components/collapse/中的第一个示例复制）。

这工作正常，直到我尝试调用引导程序

Carouse.getOrCreateInstance()

。如果调用该函数，则切换将停止，错误，切换。

如果我注释掉

Carousel.getOrCreateInstance()

，折叠效果很好。如果我取消注释，该组件将拒绝折叠 - 我必须按 ctrl-r 刷新页面才能使其再次折叠。

虽然此示例应用程序中未使用轮播，但在我的“真实”应用程序中，它已被使用并且工作正常（我使用轮播实例来告诉轮播首先显示哪些图像）。您还会注意到，轮播 div 不会包裹或接触我想要折叠的组件。

我应该补充一点，所有引导可折叠项都会发生这种未折叠行为 - 导航栏和手风琴等。

我正在使用 Bootstrap 5.3.1、React 18.2.0 和 Node 18.17.1。

这是代码：

import React, { useRef, useEffect } from 'react'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js'

import { Carousel } from 'bootstrap'

function App() {
  const ref = useRef(null)

  useEffect(() => {
    if (!ref.current) {
      return
    }
    let carousel = Carousel.getOrCreateInstance(ref.current) // comment out this line and the collapse works
  }, [])
  return (
    <>
      <div id="imageCarousel" ref={ref} className="carousel slide">
      </div>
      <a className="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Link with href
      </a>
      <button className="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        Button with data-bs-target
      </button>
      <div className="collapse" id="collapseExample">
        <div className="card card-body">
          Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
        </div>
      </div>
    </>
  )
}

export default App

Answer 1

原来我不需要使用 Bootstrap Carousel API 来控制导航到轮播图像列表中的特定图像。

我重构了我的代码，只在目标上切换“活动”类

carousel-item

，这意味着我不需要使用

Carousel.to()

API 调用。

正如原始问题中提到的，删除

Carousel.to()

API 调用可以使问题消失。

我意识到这在原始问题的上下文中可能没有意义，但是在我的完整应用程序中，我需要能够单击图像缩略图，这将打开包含轮播的模式，然后导航到内部单击的图像那个旋转木马。

引导程序 doco 说我无法使用单个元素（即我的缩略图）data-bs-*:

控制两个引导程序组件

确保仅在单个元素上使用一组数据属性 （例如，您无法从同一按钮触发工具提示和模式。）

我最初的实现使用 data-bs-* 来控制模式，并使用

Carousel.to()

API 来控制显示哪个轮播图像。但这导致了奇怪的非崩溃行为。

因此，我重新设计了解决方案，以使用图像缩略图按钮的 data-bs-* 控制模式，然后通过图像缩略图按钮的

onClick()

处理程序将“active”类添加到轮播项目。因此无需调用

Carouse.to(index)

，因此根本无需使用 API。