React：React-bootstrap 模式在 ie 10 中不起作用答案

【问题标题】：React: React-bootstrap modal not working in ie 10React：React-bootstrap 模式在 ie 10 中不起作用
【发布时间】：2019-08-31 03:59:24
【问题描述】：

使用 React-Bootstrap，我有一个有条件打开的模式。该模态在 ie 11 中运行良好。

这是在 ie11 中工作的模态..

handleCloseAlert() {
  this.setState({ alertShow: false });
}

handleShowAlert() {
  this.setState({ alertShow: true });
}
noResults() {
  this.setState({alertShow:true})
}

<Modal show={this.state.alertShow} 
          onHide={this.handleCloseAlert}
          {...this.props}
          data-toggle="modal"
          size="sm"
          aria-labelledby="contained-modal-title-vcenter"
          centered>
          <Modal.Header closeButton>
            <Modal.Body>No results found</Modal.Body>
          </Modal.Header>
        </Modal>

当我在 ie10 中测试时，当模式应该打开时屏幕变白。这是我在控制台中遇到的错误..

[object Error]{description: "Unable to s...", message: "Unable to s...", name: "TypeError", number: -2146823281, stack:
Unhandled promise rejection TypeError: Unable to set property 'paddingRight' of undefined or null reference

我还仅使用 Bootstrap 代码进行了测试，并且该模式与 bootstrap 网站上的示例代码一起使用。我想我可以使用他们的代码，但我不知道如何有条件地打开和关闭模式。

这是来自引导程序的示例，未针对条件反应渲染进行编码..

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

我尝试将show={this.state.alertShow} 添加到模态标记，但我在控制台中收到此错误。

Warning: Received `false` for a non-boolean attribute `show`.

If you want to write it to the DOM, pass a string instead: show="false" or show={value.toString()}.

If you used to conditionally omit it with show={condition && value}, pass show={condition ? value : undefined} instead.

有没有办法保留我当前的代码并让它与 ie10 一起使用？还是我需要在没有 React-Bootstrap 的情况下重新编码？

我的 index.js 中也有 import 'react-app-polyfill/ie9';

【问题讨论】：

这并不是讽刺，但对 IE10 的支持已于多年前结束，根据使用情况统计，几乎没有用户使用该版本。您确定您的应用程序需要支持 IE10？
不幸的是。
我想知道您是否在代码中设置了 paddingRight 属性？如果有，价值是多少？
这很奇怪。唯一定义的 paddingRight 嵌套在 react-bootstrap 中模态的节点模块中。我尝试将其注释掉，但没有任何效果。
更新。据说 react-bootstrap 应该可以与 IE 10 一起使用。除了模式之外，一切都是。是否有可能我的 polyfill 设置错误。我正在使用 react-app-polyfill 包。够了还是我还需要一个cdn？

标签： reactjs bootstrap-modal internet-explorer-10 react-bootstrap

【解决方案1】：

Modal 正在使用新的 react-bootstrap 更新

【讨论】：