Question

我只是想直接从React Bootstrap网站上测试Carousel组件，所以我从网站本身按字面意思复制并粘贴了代码片段，而不是像这样：

它最终看起来像这样：

我的代码可以在下面找到：

 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;

希望有人可以帮我解决这个问题：）

React Bootstrap如何使不受控制的Carousel组件正常工作？

0 个答案: