无法打开新的弹出窗口反应引导程序

Question

我正试图在react中打开一个新的弹出窗口。我复制了代码，从这里打开了一个新的弹出窗口：https://react-bootstrap.netlify.com/components/modal/

当我按下按钮时，它不会打开新窗口

这是我的代码：

import React from 'react';
import './App.css';
import {Modal, Button} from 'react-bootstrap'
function MyVerticallyCenteredModal(props) {
return (
<Modal
{...props}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Modal heading
</Modal.Title>
</Modal.Header>
<Modal.Body>
<h4>Centered Modal</h4>
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros.
</p>
</Modal.Body>
<Modal.Footer>
<Button onClick={props.onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
}
function App() {
const [modalShow, setModalShow] = React.useState(false);
return (
<>
<Button variant="primary" onClick={() => setModalShow(true)}>
Launch vertically centered modal
</Button>
<MyVerticallyCenteredModal
show={modalShow}
onHide={() => setModalShow(false)}
/>
</>
);
}
export default App;

我希望结果是打开一扇新的窗户。但我得到了这个结果。

我做错了什么？我正在使用新的chrome，这是我的引导版本：1.0.0-beta.16

Answer 1

根据react-bootstrap文档，您需要安装bootstrap&导入引导.css

import 'bootstrap/dist/css/bootstrap.min.css';