React Bootstrap How to make the uncontrolled Carou

2019-08-20 02:59发布

问题:

I'm just trying to test out the Carousel component directly from the React Bootstrap website, so I literally copied and pasted snippets of code from the website itself and instead of looking something like this:

Proper Carousel Component Display

It ends up looking like this:

My version of the Carousel component

My code can be found below:

 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
 import { Carousel } 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;

Hope someone can help me out on this :)