React-Bootstrap模态始终在页面上打开/可见

Question

当用户单击读取项目的模版时，我将使用react-bootstrap的模版为我的CRUD应用程序呈现模版，模版将弹出并包含所有要求的信息。该问题在应用程序首次启动时出现，并且一直存在。 模态停留在页面底部，我的布尔值显示/隐藏模态，这就是我的称呼方式：

<Modal.Dialog open={this.state.showServiceModal}>

没有任何帮助，当我移除打开的道具时，会发生相同的结果：模态始终可见，并且模型不应该出现在屏幕中央吗？是什么赋予了？模态出现在底部，我希望它出现在中间，而我的关闭模态按钮也不起作用，引导程序的模态给了我一个艰难的时期，我该如何解决所有这些问题？

这是我的渲染：

render() {
  return (
    <div>
      <div className="container content">
        <div className="row">
          <div className="col-6" />
        </div>
      </div>

      <Modal.Dialog open={this.state.showServiceModal}>
        <Modal.Header>
          <Modal.Title>Service</Modal.Title>
        </Modal.Header>

        <Modal.Body>
          <p>
            <span>id:</span> {this.state.currentService.id}
          </p>
          <p>
            <span>description:</span> {this.state.currentService.description}
          </p>
        </Modal.Body>

        <Modal.Footer>
          <Button
            variant="secondary"
            onClick={() => this.setState({ showServiceModal: false })}
          >
            Close
          </Button>
        </Modal.Footer>
      </Modal.Dialog>
    </div>
  )
}

Answer 1

您正在open上使用Modal.Dialog道具来打开和关闭模态。但是react-bootstrap的Modal.Dialog用documentation has no such API来显示static modal。

使用Modal组件作为父组件，而使用show道具。也可以使用centered道具使其垂直居中。

这里是一个例子：

<Modal
    show={this.state.showServiceModal}
    onHide={this.handleClose}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
 >
    {...}
</Modal>

这是沙箱中的演示：