未捕获错误：不变违例：findComponentRoot（…，… $ 110）：无法find元素。 这可能意味着DOM意外地发生了变化

我在做什么错误的嵌套周期在React？ 我在Googlesearch了信息，但没有find合适的信息。 你能帮我find，我明白错了吗？

从图中可以看出，我有一个variables的数据。 它工作正常。 但是当我添加一个值不是从这个<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）：>无法find元素。 这可能意味着DOM出乎意料地发生了变化（例如，通过>浏览器），通常是因为忘记了使用表时的时间，……。

Answer 1

所以问题是你正在创build一个像这样的虚拟DOM结构：

 <tbody> <tr> <div> <td>...</td> <td>...</td> </div> </tr> </tbody> 

因为<div/>不是<tr>的有效子<tr>所以浏览器实际上创build了代表这个的DOM：

 <div> </div> <table> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table> 

^小提琴

当反应进行更新时，它正在查看<tr>并想知道<div>去向。 相反，它find一个<td>所以它会抛出一个错误。

Answer 2

我得到了上面提到的错误，试图做一个testing：

 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] 

Answer 3

有时也会发生React从两个不同位置（例如，从需求和HTML）加载的情况，

Answer 4

请在https://github.com/facebook/react/issues/3811中查看这个问题，这说“这是一个当前的限制，你不能从一个React渲染方法中返回多个组件”，所以你还应该检查你的渲染是否返回多个元素;

Answer 5

我有类似的问题，原因是我在React.js组件内使用<form>标签，并将其呈现给已经打开了<form>的页面位置。 表单不能嵌套。 所以你可以得到这个错误，即使组件内的HTML似乎是有效的。

Answer 6

这个错误是因为某处有HTML标记是无效的。

在我的情况下，我笨拙地有一个button标签里面的React生成一个表单标签，直到这个错误开始出现才意识到。 检查你的标记是否允许嵌套错误。

Answer 7

我有这个相同的问题，原来是DOM中的两个元素相同的ID（无意中）。

Answer 8

在我的情况下，问题是与button的types。 如果在<button>使用type="button" ，则ReactDOM会丢失。

我删除了type="button"并在我的onClick处理函数中添加了一个event.preventDefault() ，它对我很有帮助。