reactjs 未显示React引导组件

8yoxcaq7  于 2022-11-29  发布在  React
关注(0)|答案(4)|浏览(157)

我试图测试出旋转木马,但当我加载的网页是空白的。
我用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>
slsn1g29

slsn1g291#

您是否将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>
pod7payv

pod7payv2#

找到了解决方案。这不是引导相关的,而是我如何导出和命名我的组件。
组件需要按此处所述大写。Simple React component not rendering

sc4hvdpw

sc4hvdpw3#

将此添加到index.js文件中

import 'bootstrap/dist/css/bootstrap.css';
gab6jxml

gab6jxml4#

在index.html中添加CDN链接。虽然您找到了它,但这将帮助其他人。

<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"/>

或将其添加到app.css中

@import "bootstrap/dist/css/bootstrap.css";

相关问题