多个轮播包装不起作用（反应）

Question

我尝试使用至少四个不同的图像轮播包，但似乎都无法正常工作。例如，我正在使用Bootstrap react传送带导入，但无法正常工作。这是我的代码，与Bootstrap网站上的代码相同。猜猜我的翻译器可能有问题...

从'react-bootstrap'导入{Row，Col，Carousel};

<Carousel>
            <Carousel.Item >
              <img width={900} height={500} alt="900x500" src= {require('../../../public/fish2.jpg')} />
              <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 width={900} height={500} alt="900x500" src={require('../../../public/fish4.jpg')} />
              <Carousel.Caption>
                <h3>Second slide label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
              </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
              <img width={900} height={500} alt="900x500" src={require('../../../public/fish3.jpg')} />
              <Carousel.Caption>
                <h3>Third slide label</h3>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
              </Carousel.Caption>
            </Carousel.Item>
          </Carousel>

babelrc：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
    ['@babel/preset-stage-2', { decoratorsLegacy: true }],
    '@babel/preset-flow',
    '@babel/preset-react',
  ],
  ignore: ['node_modules', 'build'],
};