反應引導。 特別是解析錯誤：意外的標記，預期的“，”

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 。