ReactStrap 模态关闭图标未在模态中显示以及如何将标题与其他标签一起使用

Posted 2023-03-23

【中文标题】ReactStrap 模态关闭图标未在模态中显示以及如何将标题与其他标签一起使用

【英文标题】：ReactStrap modal close icon is not getting show in the modal and How to use the header with some another tag

【发布时间】：2019-05-02 07:21:24

【问题描述】：

我是 react js 的新手。这里我使用reactStrap的Modal。

<Modal isOpen=props.isOpen centered='true'>
        <ModalHeader>
          Change this Question?
          <button type="button" class="close" aria-label="Close" onClick=props.closeModal ><span aria-hidden="true">×</span></button>
        </ModalHeader>
        <ModalBody>
          <div className="row">
            <div className="col-md-12 text-center ">
              <Button type="submit" className="btn btn-outline-primary" onClick=props.showChangeQuestionModal >Change by creating your own Question</Button>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center marginForOrOption">
              <span>or</span>
            </div>
          </div>
          <div className="row">
            <div className="col-md-12 text-center">
              <Button type="submit" color="btn btn-primary">Change and Replace from Question bank</Button>
            </div>
          </div>
        </ModalBody>
        <ModalFooter>
        </ModalFooter>
      </Modal>
    </div>

现在我在这里添加了关闭 modal 的按钮。但是在 reactstrap 中它是默认出现的。但在我的情况下它没有出现。

另一个问题是， 在 ModalHeader 中，默认为 h5，我该如何更改？

【参考方案1】：

第一个问题：如果您希望 reactstrap 显示自己的关闭按钮，则需要为 ModalHeader 组件的道具提供 toggle 方法，这样您的 ModalHeader 应该如下所示：

<ModalHeader toggle=this.toggleModalMethod>
   Change this Question?
</ModalHeader>

第二个问题：你不会在模态标题中使用 h5 做太多事情，但你绝对可以改变你的 h5 元素样式，让它看起来像你想要的样子：

<ModalHeader>
  <span className="customStyleToOverrideDefault">Change this Question?</span>
</ModalHeader>

如果对你有帮助，请不要忘记为我的回答投票。

【讨论】：

非常感谢。我一直在寻找这个答案的反面 - 如何隐藏关闭按钮。不将切换传递给 ModalHeader 就可以了。