44

我在 React 中的嵌套循环做错了什么？我在 Google 中搜索了信息，但没有找到合适的信息。你能帮我看看，我理解错了吗？

从图中可以看出，我在一个变量中有数据。它工作正常。但是当我添加一个不是来自 this 的值时<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 发生了意外变异（例如，由 >browser），通常是由于在使用表时忘记了 a，n......`。

4

8 回答 8

71

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

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

因为<div/>is not a valid child of <tr>the browser 实际上创建 DOM 表示：

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

小提琴

当 react 去更新时，它会看着那个<tr>并想知道<div>去哪里了。相反，它会找到 a<td>所以它会引发错误。

于 2014-07-30T00:31:43.583 回答
4

我在尝试执行此操作时遇到了上述错误：

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]
于 2015-08-25T07:42:01.877 回答
2

当 React 从两个不同的位置（例如从 require 和 HTML 中）加载时，有时也会发生这种情况

于 2015-06-17T13:39:18.487 回答
1

我遇到了同样的问题，结果是 DOM 中的两个元素具有相同的 ID（无意中）。

于 2016-05-12T02:28:06.853 回答
1

就我而言，问题在于按钮的类型。type="button"如果你在 a 中使用 a，ReactDOM 会丢失<button>。

我删除了type="button"并event.preventDefault()在我的 onClick 处理程序上添加了一个，它对我有用。

于 2016-09-23T10:56:55.047 回答
0

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

于 2015-11-02T20:10:39.350 回答
0

我遇到了类似的问题，原因是我<form>在 React.js 组件中使用了标签，并将其渲染到已经<form>打开的页面位置。表格不能嵌套。因此，即使组件内的 HTML 似乎有效，您也会收到此错误。

于 2016-02-24T19:13:09.567 回答
0

此错误是因为某处存在无效的 HTML 标记。

在我的例子中，我笨拙地让 React 在一个按钮标签中生成一个表单标签，直到这个错误开始出现之前我才意识到。检查您的标记是否存在不允许的嵌套错误。

于 2016-03-24T19:49:20.657 回答