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

Question

I am trying to open a new popup window in react. I copied the code to open a new popup window from here: https://react-bootstrap.netlify.com/components/modal/

And when I press the button, it is not opening a new window

this is my code:

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;

I expect the result to be a new window open. but instead I get this result.

What am I doing wrong? I am working with the new chrome, and this is my bootrap version: 1.0.0-beta.16

Answer 1

根据react-bootstrap 文档你需要安装bootstrap并导入 bootstrap.css

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