React-Bootstrap carousel滑块:如何在显示中检测当前幻灯片

import React from 'react';
import { Carousel } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

const slides = [
  { id: 1, content: 'Slide 1' },
  { id: 2, content: 'Slide 2' },
  { id: 3, content: 'Slide 3' }
];

const MyCarousel = () => {
  const [activeIndex, setActiveIndex] = React.useState(0);

  const handleSelect = (selectedIndex) => {
    setActiveIndex(selectedIndex);
  };

  return (
    <Carousel activeIndex={activeIndex} onSelect={handleSelect}>
      {slides.map((slide) => (
        <Carousel.Item key={slide.id}>
          <img
            className="d-block w-100"
            src={slide.image}
            alt={`Slide ${slide.id}`}
          />
          <Carousel.Caption>
            <h3>{slide.content}</h3>
          </Carousel.Caption>
        </Carousel.Item>
      ))}
    </Carousel>
  );
};

export default MyCarousel;

import React from 'react';
import MyCarousel from './MyCarousel';

const App = () => {
  return (
    <div>
      <h1>React-Bootstrap Carousel</h1>
      <MyCarousel />
    </div>
  );
};

export default App;