React Bootstrap 구성 요소가 표시되지 않습니다.

캐 러셀을 테스트하려고하는데 페이지를로드 할 때 아무 것도 표시되지 않습니다.React Bootstrap 구성 요소가 표시되지 않습니다.

반 응 부트 스트랩을 npm과 함께 설치했습니다.

카루 코드는 https://react-bootstrap.github.io/components.html#media-content입니다. 웹 콘솔을 보았는데 경고 나 오류가 없습니다.

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>

출처

2016-11-12 user3034572

해결책을 찾았습니다. 부트 스트랩과 관련이 없으며 구성 요소를 내보내고 이름을 지정하는 방법입니다.

구성 요소는 여기에 설명 된대로 대문자이어야합니다. Simple React component not rendering

출처

2016-11-14 01:29:52 user3034572

당신은 파일을 HTML로 JS 파일을 포함나요?

<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>

출처

2016-11-12 20:26:41 beciaha

나는 그것을 추가 시도하고 지금은 콘솔 에서이 오류 "반응-bootstrap.js : 2037 catch되지 않은 형식 오류를 : 정의되지 않은 (...) 수출 .__ esModule @ 반응-bootstrap.js의 특성 'PropTypes'을 읽을 수 없습니다 : 2037__webpack_require__를 @ 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

React Bootstrap 구성 요소가 표시되지 않습니다.

답변

관련 문제