react bootstrap 模型框在 react 16 中不起作用

Question

我在 reactjs 16 版本中实现模态弹出框时遇到问题。我正在使用这个 react-bootstrap example。下面是代码，看看并告诉我你的想法。

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>
    );
  }
};

下面是我遇到的错误。

这是我的依赖项：

"dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^16.0.0",
    "react-bootstrap": "^0.31.3",
    "react-date-picker": "^6.1.1",
    "react-dom": "^16.0.0",
    "react-overlays": "^0.8.2",
    "react-scripts": "1.0.14",
    "validate.js": "^0.11.1"
  },

我一直在寻找过去 15 个小时的解决方案，但找不到。我检查了 react-bootstrap 包关闭问题，但找不到解决方案。

提前致谢。

更新：提到了解决方案

Answer 1

react-bootstrap 库中的 Modal 组件目前与 React v16 不兼容，目前没有正式发布的可用实现。人们分享了一些猴子补丁，绕过了错误，但代价是 UI 动画。请参阅 connorjburton 中的以下内容：

import { Modal as ReactOverlayModal } from 'react-overlays';

class Modal extends ReactOverlayModal {
  focus() {};
}

export default Modal;

我还没有亲自尝试过这个猴子补丁。

目前有几个拉取请求试图在 react-overlays 存储库上解决此问题，维护者 asked 寻求帮助。

更新

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

Answer 2

这是我应用的答案。将以下补丁放入位于项目根文件夹的 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",

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

react bootstrap 模型框在 react 16 中不起作用

react bootstrap Model box doesn't work in react 16

javascript

bootstrap-modal

reactjs

twitter-bootstrap-3

react-bootstrap