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

Question

我是 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>

现在我在这里添加了那个按钮来关闭模态。但在 reactstrap 中它默认出现。但在我的情况下它不会出现。

另一个问题是，在 ModalHeader 中，它默认带有 h5，所以我该如何更改它？

Answer 1

第一个问题:如果你想让 reactstrap 显示它自己的关闭按钮，你需要为你的 ModalHeader 组件的 Prop 提供 toggle 方法，这样你的 ModalHeader 应该看起来像:

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

第二个问题:您不会对模式标题中的 h5 做太多事情，但您绝对可以更改 h5 元素样式以使其看起来像您想要的样子:

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

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