单击事件后重新渲染我的react组件时,出现以下错误:
Uncaught Error: Invariant Violation: processUpdates(): Unable to find child 2 of element. This probably means the DOM was unexpectedly mutated ...
仅当我的表的行数与先前呈现的版本不同时,才会发生这种情况。例如:
/** @jsx React.DOM */ React = require('react'); var _ = require("underscore"); var testComp = React.createClass({ getInitialState: function () { return { collapsed: false }; }, handleCollapseClick: function(){ this.setState({collapsed: !this.state.collapsed}); }, render: function() { var rows = [ <tr onClick={this.handleCollapseClick}><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr> ]; if(!this.state.collapsed){ rows.push(<tr><th>Row1 1</th><th>Row1 2</th><th>Row1 3</th></tr>); } rows.push(<tr><th>Footer 1</th><th>Footer 2</th><th>Footer 3</th></tr>); return <div> <table> {rows} </table> </div> } }); module.exports = testComp
如果我呈现不同的内容,但具有相同的行数,则不会收到错误,因此如果将if语句更新为:
if(!this.state.collapsed){ rows.push(<tr><th>Row1 1</th><th>Row1 2</th><th>Row1 3</th></tr>); }else{ rows.push(<tr><th>Row2 1</th><th>Row2 2</th><th>Row2 3</th></tr>); }
…一切正常。
在这种情况下,我是否需要强行反应以重新渲染整个组件,而不仅仅是“已更改”的元素?
您应该阅读完整的错误消息(至少这是我所看到的):
找不到元素的子级2。这可能意味着该DOM意外突变 (例如,由浏览器),通常由于忘记一个<tbody>使用表格时,嵌套标签喜欢<form>,<p>或<a>,或在亲本使用非SVG元素。
<tbody>
<form>
<p>
<a>
每个表都需要一个<tbody>元素。如果不存在,浏览器将添加它。但是,如果从外部操作DOM,则React无法正常工作。