我正在使用react和bootstrap，并试图创建一个包含多个不同弹出窗口的页面。现在我有两个按钮，用来触发不同的模式。第一个完全按照预期工作，而第二个根本不做任何事情，没有错误或任何事情，但它肯定在调用.modal('show')。我能找到的关于这个主题的所有其他帖子都与重载css类有关，但我没有任何自定义css，正如我所说，我的一个模态已经很好了。
我的页面有一个顶层div CCD_；反应根"；我的react模态类是这样的：
class Modal extends React.Component{
static modalRoot = document.querySelector('#modal-root');
render() {
let content = (
<div className="modal fade" id={this.props.id} tabIndex={-1} role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">{this.props.header}</h5>
<button className="close" type="button" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div className="modal-body">
{this.props.children}
</div>
{this.props.footer && <div className="modal-footer">{this.props.footer}</div>}
</div>
</div>
</div>
);
return ReactDOM.createPortal(
content,
Modal.modalRoot
);
}
}
这同样适用于我的第一个模态。
第一种模式具有以下标签/按钮/触发功能：
<Modal id="playerSearchModal" header="Search Results:"> ,
<form className={className} onSubmit={this.doSearch}>
...
<Button btnType="primary" type="submit" data-target="#playerSearchModal"> ,
doSearch(e){
Ajax...
$('#playerSearchModal').modal('show');
第二种非功能模态有以下几种：
<Modal id={this.modalId} header={this.state.popup.header}>,
<Button key="schedule" btnType="outline-primary" onClick={this.doSchedule} value={entry.entrantId} data-target={this.modalId} data-toggle="modal" type="button">
doSchedule(e){
...
$(this.modalId).modal('show');
我不确定你是否只能有一个模态或其他什么，或者我只是错过了一些愚蠢的错误。其他人能看到可能发生的事情吗？
此外，为了以防万一，生成的确切html(根据chrome dev工具(是：
<body>
<div id="react-root">...</div>
<div id="modal-root" class="container-fluid">
<div class="modal fade" id="playerSearchModal" tabindex="-1" aria-hidden="true" style="display: none;">
<div class="modal fade" id="eventEntryModal" tabindex="-1" role="dialog">
您可以看到两个子div上有一些不同的属性。这些都是自动生成的，而不是由我生成的，我认为这种差异与我遇到的问题有关。
这实际上是一个愚蠢的简单错误！
我有这条线路$(this.modalId).modal('show');
但是this.modalId本身并不是一个有效的id。它需要#。
所以应该是$('#' + this.modalId).modal('show');