React Bootstrap Как заставить работать неуправляемый карусельный компонент? - PullRequest
0 голосов
/ 24 октября 2018

Я просто пытаюсь протестировать компонент Carousel непосредственно с сайта React Bootstrap, поэтому я буквально скопировал и вставил фрагменты кода с самого сайта и вместо того, чтобы выглядеть примерно так:

Надлежащий дисплей компонента карусели

В итоге он выглядит так:

Моя версия компонента карусели

Мой код можно найтиниже:

 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;

Надеюсь, кто-нибудь может мне помочь в этом:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...