我试图测试出旋转木马，但当我加载的网页是空白的。
我用npm安装了react引导程序。
carousal代码来自https://react-bootstrap.github.io/components.html#media-content。我查看了我的Web控制台，也没有任何警告或错误。
carousal.js
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>
4条答案
按热度按时间slsn1g291#
您是否将js文件包含到html文件中？
pod7payv2#
找到了解决方案。这不是引导相关的，而是我如何导出和命名我的组件。
组件需要按此处所述大写。Simple React component not rendering
sc4hvdpw3#
将此添加到index.js文件中
gab6jxml4#
在index.html中添加CDN链接。虽然您找到了它，但这将帮助其他人。
或将其添加到app.css中