[英]React-Bootstrap. Specifically with Parsing error: Unexpected token, expected ","
So I have a parsing error and i don't know how to fix it.所以我有一个解析错误,我不知道如何解决它。 I am using React Bootstrap and I'm having trouble with declaring the Components at the very top of my code.
我正在使用 React Bootstrap 并且在我的代码的最顶部声明组件时遇到了问题。 And I just copied the Carousel code from the React-Bootstrap website itself and I just wanted to run it locally but I cannot seem to fix this issue.
我只是从 React-Bootstrap 网站本身复制了 Carousel 代码,我只是想在本地运行它,但我似乎无法解决这个问题。
Line 4: Parsing error: Unexpected token, expected ","第 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() {
My full code is here:我的完整代码在这里:
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;
4 |
4 | import { Carousel, Carousel.Item, Carousel.Caption } from 'react-bootstrap';
从'react-bootstrap'导入{Carousel, Carousel.Item, Carousel.Caption };
You only need to import Carousel
.您只需要导入
Carousel
。 That will automatically import Carousel.Item
and Carousel.Caption
, since Item
and Caption
are on the object Carousel
.这将自动导入
Carousel.Item
和Carousel.Caption
,因为Item
和Caption
在对象Carousel
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.