无法打开新的弹出窗口 window 反应 bootstrap

Question

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

当我按下按钮时，它并没有打开一个新的 window

这是我的代码：

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;

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

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

Answer 1

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

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

无法打开新的弹出窗口 window 反应 bootstrap

Can't open a new popup window react bootstrap

reactjs

react-bootstrap

react-bootstrap4-modal