反应-引导 . 特别是解析错误:意外的令牌,预期“,”

所以我有一个解析错误,我不知道如何解决它 . 我正在使用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)

2 years ago

4 |从'react-bootstrap'导入{Carousel,Carousel.Item,Carousel.Caption};

您只需要导入 Carousel . 这将自动导入 Carousel.ItemCarousel.Caption ,因为 ItemCaption 位于对象 Carousel 上 .