所以我有一个解析错误,我不知道如何解决它 . 我正在使用React Bootstrap,我在代码的最顶层声明组件时遇到了麻烦 . 我只是从React-Bootstrap网站本身复制了Carousel代码,我只是想在本地运行它,但我似乎无法解决这个问题 .
第4行:解析错误:意外的令牌,预期“,”
2 | import logo from './logo.svg';
3 | import './App.css';
> 4 | import { Carousel, Carousel.Item, Carousel.Caption } from 'react-bootstrap';
| ^
5 |
6 | class App extends Component {
7 | render() {
我的完整代码在这里:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Carousel, Carousel.Item, Carousel.Caption } from 'react-bootstrap';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
{/* <img src={logo} className="App-logo" alt="logo" />
{<p>
Edit <code>src/App.js</code> and save to reload.
</p> */}
<Carousel>
<Carousel.Item>
<img width={900} height={500} alt="900x500" src="/carousel.png" />
<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="/carousel.png" />
<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="/carousel.png" />
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>;
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
</a>
</header>
</div>
);
}
}
export default App;
1 回答
您只需要导入
Carousel
. 这将自动导入Carousel.Item
和Carousel.Caption
,因为Item
和Caption
位于对象Carousel
上 .