React-bootstrap 模式在“x”标记中显示无效字符

Question

我们正在使用 react-modal 来显示模态对话框，我们有以下代码

<Modal.Header closeButton>
     <Modal.Title>Drugs</Modal.Title>
</Modal.Header>

关闭按钮出现在附加图像中。有人遇到过同样的问题吗？关闭按钮问题

Answer 1

它不一定很优雅，但这里有一个解决方案。我正在使用 React/Redux，因此在我的容器上，我将以下函数从我的调度映射到 props：

const mapDispatchToProps = (dispatch) => {
    ...

    fixCloseLabel: function(e) {
      e.getElementsByClassName('modal-header')[0].getElementsByTagName('span')[0].innerHTML = 'x'
    }

    ...
}

然后在模态本身上我添加了以下内容：

<Modal show={this.props.twitterModalVisible} onEnter={this.props.fixCloseLabel} onHide={this.props.hideTwitterModal}>

只要确保您将道具传递到链条上，就可以开始了！