Question

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

Answer 1

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

您只需要导入Carousel。由于Carousel.Item和Carousel.Caption在对象Item上，因此这将自动导入Caption和Carousel。

React-Bootstrap。特别是解析错误：意外的令牌，预期为“，”

1 个答案: