Question

我在reactjs 16版本的modal弹出框的实现过程中遇到了一个问题。我正在使用这个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包已关闭的问题，但无法找到解决方案。

感谢您的进步。

更新：提到了解决方案here

Answer 1

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

中的以下内容

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

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

export default Modal;

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

目前有几个pull请求尝试在react-overlays存储库上修复此问题，维护者有asked寻求帮助。

更新

此问题已在react-overlays v0.7.3中得到解决。 parent包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",

如果有人卡在某处让我知道，我会帮助他们。

反应引导模型框在反应16中不起作用

2 个答案: