无法读取未定义的属性 'X' - React-bootstrap

Question

我正在尝试 React.js，发现它的所有语法和不同的思考方式有点难。我正在尝试为我的 webapp 创建一个模态界面，到目前为止我已经这样做了：

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' 并且该行出错了，所以那不是要走的路。

奇怪的是，当 MyModal.jsx 只有 48 行时，它说错误在第 68 行。无论如何，任何人都可以帮助我吗？

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

无法读取未定义的属性 'X' - React-bootstrap

Cannot read property 'X' of undefined - React-bootstrap

reactjs

react-bootstrap

无法读取未定义的 属性 'X' - React-bootstrap

Cannot read property 'X' of undefined - React-bootstrap

reactjs

react-bootstrap

无法读取未定义的属性 'X' - React-bootstrap