カルーセルをテストしようとしていますが、ページをロードすると空白になります。React Bootstrapコンポーネントが表示されない
反応ブートストラップをnpmでインストールしました。
キャロルコードはhttps://react-bootstrap.github.io/components.html#media-contentです。私は私のウェブコンソールを見て、私は警告もエラーもありません。
import React, { Component } from 'react';
import {Carousel} from 'react-bootstrap';
class carousel extends Component {
render() {
return (
<Carousel>
<Carousel.Item>
<img width={900} height={500} alt="900x500" src={require('./images/cs_logo.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={require('./images/cs_logo.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={require('./images/cs_logo.png')}/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
}
}
export default carousel;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import carousel from './carousal';
ReactDOM.render(<carousel/>,document.getElementById('root'));
index.htmlを
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>title</title>
</head>
<body>
<header>
<div id="nav"></div>
</header>
<div id="root" style="text-align: center; float: none"></div>
</body>
</html>
「反応-bootstrap.jsを私はそれを追加しようと、今私は、コンソールにこのエラーが出ます:2037__webpack_require__:2037キャッチされない例外TypeError:未定義(...)輸出.__ esModule @反応-bootstrap.jsのプロパティを読み取ることができません 『PropTypes』を@ react-bootstrap.js:30exports .__ esModule @ react-bootstrap.js:430__webpack_require__ @ react-bootstrap.js:30exports .__ esModule @ react-bootstrap.js:62__webpack_require__ @ react-bootstrap.js:30exports .__ esModule @ react-bootstrap .js:50(匿名関数)@ react-bootstrap.js:53webpackUniversalModuleDefinition @ react-bootstrap.js:9(無名関数)@ react-bootstrap.js:10 " – user3034572