Не могу открыть новое всплывающее окно реагировать bootstrap - PullRequest
Новая
       9

Не могу открыть новое всплывающее окно реагировать bootstrap

0 голосов
/ 19 февраля 2020

Я пытаюсь открыть новое всплывающее окно в реакции. Я скопировал код, чтобы открыть новое всплывающее окно отсюда: 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, и это моя версия bootrap: 1.0.0-beta.16

1 Ответ

0 голосов
/ 19 февраля 2020

Согласно react-bootstrap документации Вам необходимо установить bootstrap & import bootstrap. css 

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