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

Question

我正在尝试以响应方式打开一个新的弹出窗口。我复制了代码以从此处打开一个新的弹出窗口：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;

我希望结果是打开一个新窗口。但是我得到了this结果。

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

Answer 1

根据react-bootstrap documentation，您需要安装bootstrap并导入bootstrap.css

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