Javascript react bootstrap Model box不'；我不能在办公室工作

在ReactJS16版本中实现模式弹出框的过程中，我遇到了一个问题。我正在用这个。 下面是代码，看一看，让我知道你的想法

import React, { Component } from 'react';
import { Button, Modal } from 'react-bootstrap';

export default class ModelFirst extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false
    };

    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    console.log('open');
    this.setState({ showModal: true });
  }

  render() {
    return (
      <div>
        <p>Click to get the full Modal experience!</p>
        <Button
          bsStyle="primary"
          bsSize="large"
          onClick={this.open}
        >
          Launch demo modal
        </Button>

        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4>Overflowing text to show scroll behavior</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>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
            <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
};

过去15个小时我一直在寻找解决方案，但没有找到。我已经检查了react引导包关闭问题，但找不到解决方案

提前谢谢你

更新：

---

提到了解决方案

react引导程序库中的模式组件目前与react v16不兼容，目前还没有正式发布的有效实现。有一些人们共享的猴子补丁绕过了错误，但代价是UI动画。请参阅以下内容：

我个人没有试过这种猴子贴片

目前有几个请求试图在react overlays存储库中修复此问题，维护人员需要帮助

更新

---

该问题已在react overlays v0.7.3中解决。父包react引导将下载此更新版本作为依赖项。

以下是我应用的答案。将下面的补丁放在index.js文件中，该文件位于使用提供程序的项目根文件夹中

import Modal from 'react-bootstrap/node_modules/react-overlays/lib/Modal';
Modal.prototype.componentWillMount = function componentWillMount() {
  this.focus = function focus() {};
};

下面是我使用的依赖项。 新安装的库

1: react-overlays: "^0.8.2",

1: react: "^16.0.0",
2: react-dom: "^16.0.0",
3: react-bootstrap: "^0.31.3",

更新现有图书馆

1: react-overlays: "^0.8.2",

1: react: "^16.0.0",
2: react-dom: "^16.0.0",
3: react-bootstrap: "^0.31.3",

---

如果有人在某个地方卡住了，请告诉我，我会帮助他们。

hey@MatthewtFarly感谢您的回复，我试图实现上述修补程序，但不知道将此文件放在何处。你能指导我实现这个类吗。我需要把它放在根级别的索引文件中还是放在组件中。提前感谢。@RahulMangal使用此修补程序的一种方法是将修补过的组件定义放在它自己的文件中，与其他组件文件位于同一目录中，导出它，然后导入修补过的Modal版本，并使用它，而不是使用Modal组件的任何位置的

react bootstrap

。不要忘记从

react引导中删除模式导入。