React Bootstrap 组件不显示
[英]React Bootstrap Components not displaying
问题描述
I'm trying to test out the carousel but when I load the page it is blank.
我正在尝试测试轮播，但当我加载页面时它是空白的。
I installed react bootstrap with npm.我用 npm 安装了 React Bootstrap。
The carousal code is fromhttps://react-bootstrap.github.io/components.html#media-content . carousal 代码来自https://react-bootstrap.github.io/components.html#media-content 。 I looked at my web console and I don't have any warnings or errors either.我查看了我的 web 控制台，也没有任何警告或错误。
carousal.js 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索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import carousel from './carousal';
ReactDOM.render(<carousel/>,document.getElementById('root'));
index.html 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 个解决方案
解决方案1
1 2016-11-12 20:26:41
Did you include js files to html file?您是否将 js 文件包含到 html 文件中？
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.6/react-bootstrap.js" > </srcipt>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.6/react-bootstrap.js" > </srcipt>
解决方案2
0 已采纳 2016-11-14 01:29:52
Found the solution.找到了解决方案。 It is not Bootstrap related but rather how I was exporting and naming my components.它与 Bootstrap 无关，而是我如何导出和命名我的组件。
Components need to capitalized as stated here.组件需要按照此处所述进行大写。 Simple React component not rendering 简单的 React 组件不渲染
解决方案3
0
Add this in index.js file在 index.js 文件中添加
import 'bootstrap/dist/css/bootstrap.css';
解决方案4
0 2022-11-25 16:29:19
Add the CDN link in index.html.在index.html中添加CDN链接。 Although you found it this would help others.尽管您找到了它，但这会帮助其他人。
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"/>
or add this in app.css或者在 app.css 中添加
@import "bootstrap/dist/css/bootstrap.css";
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.