我用反应库react-bootstrap Carousel.js编写了一个简单的.js文件来创建一个不受控制的轮播，但是图像而不是像幻灯片那样一个接一个地垂直出现。发布以下代码。你能帮忙调试吗？
App.jsx
-----------
import React, { Component } from 'react';
import './App.css';
import writing from './writing.jpg' ;
import grammer from './grammer.jpg' ;
import listening from './listening.jpg' ;
import reading from './reading.jpg' ;
import {Carousel} from 'react-bootstrap';
class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
index: 0,
direction: null
};
}
render() {
const { index, direction } = this.state;
return (
<Carousel controls={false} >
<Carousel.Item >
<img src={grammer} alt="grammer" width={300} height={100} />
</Carousel.Item>
<Carousel.Item>
<img src={listening} alt="listen" width={300} height={100} />
</Carousel.Item>
<Carousel.Item>
<img width={300} height={100} alt="reading" src={reading} />
</Carousel.Item>
<Carousel.Item>
<img width={300} height={100} alt="reading" src={writing} />
</Carousel.Item>
</Carousel>
);
}
}
export default App;
Index.js
----------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and under index.html I have element below:
<div id="root"></div>
因此，运行此代码后，图像将加载到页面，但轮播行为不起作用。
我今天遇到了同样的问题而且我看到了这个未经回答的帖子，所以我认为写下我如何解决我的问题是个好主意：
在我的情况下，轮播图像是垂直对齐的，因为我没有正确包含引导程序样式表。以下是我遵循的步骤：
1.去https://react-bootstrap.github.io/getting-started/introduction/
2.找到最新的样式表并将它们复制到剪贴板。此日期的最新版本是：
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">3.将它们粘贴到
<head>文件的index.html部分。现在如果您保存所有并重新加载您的反应应用程序，它应该是好的。
希望这可以帮助任何人有同样的问题！
仅使用bootstrap-4-react您不需要自己添加CSS文件。 https://bootstrap-4-react.com/#documentation/components/carousel