未定義のプロパティ 'X'を読むことができません - リアブートストラップ

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 

私は自分のWebアプリケーションのためのモーダル・インタフェースを作成しようとしていますし、私はこれまでやりました私はそれが問題を引き起こしているModal.Headerものだと推測していますが、すでにModalをインポートしたので、その中にすべてをインポートすると仮定します。私もimport Modal.Header from 'react-bootstrap'を試してみて、その行がエラーを出してしまったので、行く方法ではありません。

奇妙なことは、MyModal.jsxが48行だけの場合、エラーが68行目にあるということです。いずれにせよ、誰も私にこれを助けることができますか？

import Modal from 'react-bootstrap'; 

：この

Answer 1

変更

import { Modal } from 'react-bootstrap'; 

Answer 2

あなたは間違った方法でModelをインポートしています。 、Modalと同じReact-Bootstrapスペックから

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