React Bootstrap轮播无法正确呈现

Question

我正在尝试使用React bootstrap轮播。文件（cockpit.js）中有一个轮播项目状态列表，而轮播代码块位于（carousel.js）中。我能够传递状态并获得结构设置。但是，Bootstrap轮播无法正确呈现。并且不显示轮播。

经检查，我发现仅呈现了一个“ carousel-item”类，但是工作结构中有2个具有1个活动类，例如“ carousel-item carousel-item active”。

Cockpit.js文件

import React, {Component} from 'react';
import Navbar from './../navbar/navbar'
import CarouselApp from './../carousel/carousel'
import Carousel from 'react-bootstrap/Carousel'

class cockpit extends Component{
    constructor(props){
        super(props);
        this.state={
            carousel: [
                {
                    img: {
                        src: 'ANYURL',
                        alt: 'First Image'
                    },
                    head: 'First Slider',
                    para: 'This is First Slider for carousel'
                },
                {
                    img: {
                        src: 'ANYURL',
                        alt: 'Second Image'
                    },
                    head: 'Second Slider',
                    para: 'This is Second Slider for carousel'
                },
                {
                    img: {
                        src: 'ANYURL',
                        alt: 'Third Image'
                    },
                    head: 'Third Slider',
                    para: 'This is Third Slider for carousel'
                }
            ]
        }
    }
    render(){
        let carousel=this.state.carousel.map((caroitem, index)=>{
            return <CarouselApp img={caroitem.img} head={caroitem.head} para={caroitem.para} key={index}/>
        });
        return(
            <div>
                <Navbar />
                <Carousel>
                    {carousel}
                </Carousel>
            </div>
        )
    };

}


export default cockpit

carousel.js文件

import React from 'react';
import Carousel from 'react-bootstrap/Carousel'
import './carousel.css'

const carousel= (props)=>{
    return(

        <Carousel.Item>
            <img
                className="d-block w-100"
                src={props.img.src}
                alt={props.img.alt}
            />
            <Carousel.Caption>
                <h1>{props.head}</h1>
                <p>{props.para}</p>
            </Carousel.Caption>
        </Carousel.Item>
    )
};

export default carousel

轮播项目类别应具有“轮播项目轮播项目”类别（2次）