javascript-未捕获的错误:始终违反:findComponentRoot(...,... $ 110):无法找到元素。 这可能意味着DOM被意外地突变了
我在React中的嵌套循环做错了什么? 我已经在Google中搜索了信息,但没有找到合适的信息。 您能帮我找到我理解的错误吗?
从图中可以看出,我有一个变量中的数据。 而且效果很好。 但是,当我添加的不是此<tr>
的值时,会出现错误!
var TableBalls80 = React.createClass({
render:function(){
var rows = this.props.rows;
var columnId = 0, trKey = 0, divKey = 0, td1stKey = 0;
var td2ndKey = 100;
return(
<table className='table table-bordered bg-success'>
<thead>
<tr className='danger'>
{rows[0].row.map(function (element){
columnId++;
return (
<th colSpan="2" key={columnId}>{columnId}</th>);
})}
</tr>
</thead>
<tbody>
{rows.map(function (rowElement){
return (<tr key={trKey++}>
{rowElement.row.map(function(ball){
console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
return(<div key={divKey++}>
<td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
</div>);
})}
</tr>);
})}
</tbody>
</table>);
}
});
错误(取决于从另一个<tr>
添加的项目):
未捕获的错误:不断违反:findComponentRoot(...,.0.1.1.0.2.0.0.1。$ 0. $ 9. $ 109):>无法找到元素。 这可能意味着DOM发生了意外更改(例如,通过>浏览器进行了更改),通常是由于在使用表时忘记了n ......`。
所以问题是您正在创建一个虚拟的DOM结构,如下所示:
<tbody>
<tr>
<div>
<td>...</td>
<td>...</td>
</div>
</tr>
</tbody>
由于<tr>
不是<div>
的有效子代,因此浏览器实际上会创建表示以下内容的DOM:
<div> </div>
<table>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
小提琴
当反应进行更新时,它正在查看<tr>
,并想知道<div>
去了哪里。 相反,它将找到<td>
,因此会引发错误。
我在尝试进行此操作时遇到上述错误:
component = React.addons.TestUtils.renderIntoDocument(<MyTableRow />)
React.findDOMNode(component)
我的解决方法是在渲染之前将其包装:
component = React.addons.TestUtils.renderIntoDocument(<table><MyTableRow /></table>)
table = React.findDOMNode(component)
row = jQuery(table).find("tr")[0]
当React从两个不同的位置加载时(例如从require和HTML加载)有时也会发生
也请在react [https://github.com/facebook/react/issues/3811]中检查此问题,它说:“这是当前的限制,您不能从React渲染方法返回多个组件。” 因此,您还应该检查渲染是否返回多个元素
我有类似的问题,原因是我在React.js组件中使用了<form>
标记,并将其渲染到已经打开了<form>
的页面位置。 表单不能嵌套。 因此,即使组件内部的HTML似乎有效,您也可以得到此错误。
该错误是因为某个地方存在无效的HTML标记。
就我而言,我笨拙地让React在按钮标签内生成了一个表单标签,直到这个错误开始出现之前我才意识到。 检查您的标记是否存在不允许的嵌套错误。
我遇到了同样的问题,结果是DOM中的两个元素具有相同的ID(无意间)。
就我而言,问题在于按钮的类型。 如果在event.preventDefault()
中使用type="button"
,则ReactDOM会丢失。
我删除了type="button"
,并在onClick处理程序上添加了event.preventDefault()
,它对我有用。