Невозможно прочитать свойство «X» неопределенного - React-bootstrap

Question

Я нахожу мои ноги мокрыми в React.js и считаю это немного жестким со всем синтаксисом и различными способами мышления о вещах. Я пытаюсь создать интерфейс модального для моего веб-приложение, и я сделал это до сих пор:

MyModal.jsx

import Modal from 'react-bootstrap'; 
import { Button } from 'react-bootstrap'; 
import ButtonToolbar from 'react-bootstrap'; 
import React from 'react'; 

export default class MyModal extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {show: false}; 
    } 

    showModal() { 
     this.setState({show: true}); 
    } 

    hideModal() { 
     this.setState({show: false}); 
    } 

    render() { 
     return (
     <ButtonToolbar> 
      <Button bsStyle="primary" onClick={this.showModal}> 
      Launch demo modal 
      </Button> 

      <Modal 
      {...this.props} 
      show={this.state.show} 
      onHide={this.hideModal} 
      dialogClassName="custom-modal" 
      > 
      <Modal.Header closeButton> 
       <Modal.Title id="contained-modal-title-lg">Modal heading</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
       <h4>Wrapped Text</h4> 
       <p>Blah</p> 
      </Modal.Body> 
      <Modal.Footer> 
       <Button onClick={this.hideModal}>Close</Button> 
      </Modal.Footer> 
      </Modal> 
     </ButtonToolbar> 
     ); 
    } // end render function 

} // end export default 

Однако я получаю ошибку:

TypeError: Cannot read property 'Header' of undefined 
MyModal.render 
webpack:///./src/components/MyModal.jsx?:68:37 

Я предполагаю, что это проблема Modal.Header, которая вызывает проблемы, но когда я уже импортировал Modal, поэтому я предполагаю, что импортирует все в нее. Я даже попробовал import Modal.Header from 'react-bootstrap', и эта строка вышла из строя, так что это не путь.

Что странно, так это то, что ошибка указана в строке 68, когда MyModal.jsx - всего 48 строк. В любом случае, может ли кто-нибудь помочь мне в этом?

Answer 1

Изменить это:

import Modal from 'react-bootstrap'; 

к:

import { Modal } from 'react-bootstrap'; 

Answer 2

Вы импортируете Model в неправильном направлении.

import Button from 'react-bootstrap/lib/Button'; 
// or 
import { Button } from 'react-bootstrap'; 

То же самое с Modal от React-Bootstrap спецификации