[英]React - invariant violation on modal
我有一個帶有類別下拉列表的模式。 選擇類別時,將顯示帶有分類的下拉列表。 如果選擇分類,則會呈現另一個組件。
第一次選擇類別和分類時,效果很好。 但是,如果我想再次選擇一個類別,則會出現以下錯誤:
Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.1.0.0.1.0.2.1.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.
我查了一下,但是通常在使用<table>
組件時會出現。 我沒有使用<table>
。
模態代碼如下:
getInitialState: function() {
return {categorySelected: false};
},
handleSelectCat: function(event) {
var index = event.target.value;
this.setState({categorySelected: true});
this.setState({classificationSelected: false});
var classificationDesc = this.props.categories[index].classes.map(function (elem, index) {
return <option value={index}><a href="#">{elem.description}</a></option>
});
this.setState({classificationDesc: classificationDesc});
},
handleSelectClass: function(event) {
var index = event.target.value;
this.setState({classificationSelected: true});
},
closeModal: function() {
this.setState({categorySelected: false});
this.setState({classificationSelected: false});
},
render: function() {
var categoryDesc = this.props.categories.map(function (elem, index) {
return <option value={index}>{elem.description}</option>
});
return (
<div id="newListModal" className="modal fade" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Create new list</h4>
</div>
<div className="modal-body">
<div>
<p>Select category</p>
<select class="form-control" onChange={this.handleSelectCat}>
{categoryDesc}
</select>
{this.state.categorySelected == true
?
<div>
<p>Select classification</p>
<select class="form-control" onChange={this.handleSelectClass}>
{this.state.classificationDesc}
</select>
</div>
:
<div></div>}
{this.state.classificationSelected == true
?
<ListAddition classification={this.props.data}/>
:
<div></div>
}
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.closeModal}>Close</button>
</div>
</div>
</div>
</div>
)
}
var classificationDesc = this.props.categories[index].classes.map(function (elem, index) {
return <option value={index}><a href="#">{elem.description}</a></option>
});
您在<option>
內有一個<a>
標記。 這不是標准的,瀏覽器可能會刪除它與React vDOM沖突
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.