React js：Invariant Violation：processUpdates（）在呈现具有不同子行数的表时

Question

在click事件后重新呈现我的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>);
}

一切正常

在这种情况下，我是否需要强制反应来重新渲染整个组件，而不仅仅是“已更改”的元素？

Answer 1

您应该阅读完整的错误消息（至少这是我所看到的）：

无法找到元素的子元素2。 这可能意味着DOM意外地被突变（例如，通过浏览器），通常是由于在使用表时忘记了<tbody> ，嵌套了像<form> ， <p>或<a>标签，或者使用非SVG元素在父母。

每个表都需要一个<tbody>元素。 如果它不存在，浏览器将添加它。 但是，如果从外部操作DOM，则React不起作用。

相关： 从表中删除行会导致TypeError

Answer 2

我在处理p标签时遇到过这种情况。 我在段落中嵌套了段落。

为了解决这个问题，我用div元素替换了包装p元素。

之前：

render: function render() {
    return (
        <p>
            <p>1</p>
            <p>2</p>
        </p>
    );
}

后：

render: function render() {
    return (
        <div>
            <p>1</p>
            <p>2</p>
        </div>
    );
}

Answer 3

对于使用react-templates的人：

您必须在.jsx文件中生成<tbody>标记。 如果您只将它添加到.rt文件中，您仍会收到错误消息。

this.tbody = <tbody>{tablerows}</tbody> // - in .jsx

Answer 4

在我的情况下，修复是删除表格渲染中的空格

<tbody> {rows} </tbody>

至

<tbody>{rows}</tbody>

Answer 5

我认为您的问题是在多行中使用<th>标记。 <th>保留给标题行。 尝试用<td>替换它，除了在第一行之外。 您还应该将标头包装在<thead>标签中，其余标签放在<tbody>标签中：

var header = [
  <tr onClick={this.handleCollapseClick}><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
];

var body = [];
if(!this.state.collapsed){
  body.push(<tr><td>Row1 1</td><td>Row1 2</td><td>Row1 3</td></tr>);
}

body.push(<tr><td>Footer 1</td><td>Footer 2</td><td>Footer 3</td></tr>);

 return <div>
     <table>
         <thead>{header}</thead>
         <tbody>{body}</tbody>
     </table>
 </div>;