React Bootstrap轮播没有正确滑动，在过渡前变为空白

Question

这是我的代码

每次滑动到下一张图片时，过渡使图片消失，然后转到下一张，我使用的是 react-bootstrap 5.1.0，但似乎有些东西无法正常工作。

我尝试了这些样式，但它似乎不起作用

Output

import React, { Component } from 'react';
import { Carousel } from 'react-bootstrap';

import 'bootstrap/dist/css/bootstrap.min.css';

export default class CarouselPage extends Component {
    render() {
        return (
            <Carousel>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src="https://via.placeholder.com/1440x500"
                        alt="First slide"
                    />
                    <Carousel.Caption>
                        <h3>First slide label</h3>
                        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src="https://via.placeholder.com/1440x500"
                        alt="Second slide"
                    />

                    <Carousel.Caption>
                        <h3>Second slide label</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                        className="d-block w-100"
                        src="https://via.placeholder.com/1440x500"
                        alt="Third slide"
                    />

                    <Carousel.Caption>
                        <h3>Third slide label</h3>
                        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        );
    }
}

Answer 1

删除此代码可以正常工作。

import 'bootstrap/dist/css/bootstrap.css';

index.html 中需要这段代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

Answer 2

对于那些使用bootstrap 类实用程序的人，可以直接调用该类，就像此处的文档一样：https://getbootstrap.com/docs/5.1/components/carousel/。直到我添加了这一行 import "bootstrap/dist/js/bootstrap.min.js" 和 import "bootstrap/dist/css/bootstrap.min.css" 之前，轮播的滑动动画似乎不起作用。这些行可以分别添加到根 index.js 文件或单个文件中。