Reactstrap 模态 window 未显示

Question

Reactstrap 未显示模态 window，当我单击启动按钮时，它正在淡出主页但未显示 window。

请帮我解决这个问题。

下面是我的代码和 package.json

import React from 'react'
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class Demoextends React.Component {
  constructor(props) {
     super(props);
     this.state = {
      modal: false
    };
    this.toggle = this.toggle.bind(this);
  };
  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }
  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>Launch</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button onClick={this.toggle}>Do Something</Button>{' '}
            <Button onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default Demo

下面是package.json

 "dependencies": {
    "bootstrap": "^4.1.1",
    "cors": "^2.8.4",
    "moment": "^2.22.1",
    "react": "^16.2.0",
    "react-calendar": "^2.14.0",
    "react-dom": "^16.2.0",
    "react-intl": "^2.4.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "reactstrap": "^6.0.1",
    "redux": "^3.7.2"
  },

Answer 1

您需要在您的应用中导入 bootstrap。 Installation - reactstrap

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

Reactstrap 模态 window 未显示

Reactstrap Modal window not showing

reactjs

reactstrap