我在React.js中沾沾自喜,发现所有的语法和不同的思考方式都有点困难。我正在尝试为我的webapp创建一个Modal界面,到目前为止我已经完成了这个:
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行。无论如何,任何人都可以帮助我吗?
答案 0 :(得分:4)
改变这个:
import Modal from 'react-bootstrap';
为:
import { Modal } from 'react-bootstrap';
答案 1 :(得分:2)
您正以错误的方式导入Model
。
import Button from 'react-bootstrap/lib/Button';
// or
import { Button } from 'react-bootstrap';
与来自React-Bootstrap规范
的Modal
相同