showModal이 true로 설정된 후에도 React-Bootstrap 모달이 팝업되지 않습니다.

Question

이전 프로젝트에서이 기능을 사용했지만 정상적으로 작동했습니다. showModal의 state이 설정되지 않았을 것이라고 생각했지만 사진을 클릭하면 사실로 설정됩니다. 나는 아래에 코드를 게시 할 것이다.

더 나은 사회를 :) 만들 수 있도록, 당신은 오히려 다운 투표를 스팸보다 더 이상 정보가 필요하면 알려 주시기 바랍니다

import React, { Component } from 'react'; 
import { Modal } from 'react-bootstrap'; 

class Gallery extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     showModal: false 
    }; 
    } 

    render() { 
    console.log(this.state); 
    const { gallery } = this.props; 
    return (
     <section id="gallery" className="three"> 
     <div className="container"> 
      <header> 
      <h2>{gallery ? gallery.title : 'Select A Gallery'}</h2> 
      </header> 
      <div className="card-deck"> 
      {gallery 
       ? gallery.images.map((image, i) => (
        <div key={i} className="card"> 
        <img 
         onClick={() => { 
         this.setState({ showModal: true }); 
         }} 
         className="card-img" 
         src={`${image}=s1000-c`} 
         alt="Card image cap" 
        /> 
        </div> 
       )) 
       : null} 
      </div> 
      <Modal 
      bsSize="sm" 
      show={this.state.showModal} 
      onHide={() => this.setState({ showModal: false })} 
      > 
      <Modal.Header closeButton> 
       <Modal.Title>Purchase Item</Modal.Title> 
      </Modal.Header> 
      <Modal.Body>Hello</Modal.Body> 
      </Modal> 
     </div> 
     </section> 
    ); 
    } 
} 

export default Gallery; 

편집 : 모달 inspect 여기에 보여주는 두 장의 사진이에 나타나있다 :

---

Answer 1

귀하의 코드를 확인 보인다 (수 참조 낮은 실행 방법).
제가 생각할 수있는 유일한 것은 페이지에 bootstrap css 파일을 포함하는 것을 잊었다는 것입니다.
react-bootstrap은 CSS 클래스 이름으로 구성 요소를 생성하는 실제 CSS를 삽입하지 않습니다. - 부트 스트랩 반응 또는 모든 반응까지로 스크린 샷에 따라 업데이트 된 질문에 대한 후속으로 편집

const {Modal} = ReactBootstrap; 
 
const gry = { 
 
    images: [ 
 
    'http://via.placeholder.com/350x150', 
 
    'http://via.placeholder.com/350x150', 
 
    'http://via.placeholder.com/350x150', 
 
    ] 
 
}; 
 

 

 
class Gallery extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 

 
    this.state = { 
 
     showModal: false 
 
    }; 
 
    } 
 

 
    btnClick =() => { 
 
    this.setState({ name: 'Sarah' }); 
 
    } 
 

 
    render() { 
 
    console.log(this.state); 
 
    const { gallery } = this.props; 
 
    return (
 
     <section id="gallery" className="three"> 
 
     <div className="container"> 
 
      <header> 
 
      <h2>{gallery ? gallery.title : 'Select A Gallery'}</h2> 
 
      </header> 
 
      <div className="card-deck"> 
 
      {gallery 
 
       ? gallery.images.map((image, i) => (
 
       <div key={i} className="card"> 
 
        <img 
 
        onClick={() => { 
 
         this.setState({ showModal: true }); 
 
        }} 
 
        className="card-img" 
 
        src={`${image}`} 
 
        alt="Card image cap" 
 
        /> 
 
       </div> 
 
      )) 
 
       : null} 
 
      </div> 
 
      <Modal 
 
      bsSize="sm" 
 
      show={this.state.showModal} 
 
      onHide={() => this.setState({ showModal: false })} 
 
      > 
 
      <Modal.Header closeButton> 
 
       <Modal.Title>Purchase Item</Modal.Title> 
 
      </Modal.Header> 
 
      <Modal.Body>Hello</Modal.Body> 
 
      </Modal> 
 
     </div> 
 
     </section> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Gallery gallery={gry} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.5/react-bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> 
 
<div id="root"></div>

은 잘 찾고 있습니다. 마크 업과 스타일을 검사하여 숨어있는 것을 확인해야합니다.