使用不同的子元素编号重新渲染后，React js崩溃

Question

在react.js中我需要使用一个或两个'td'渲染'tr'的组件，取决于它的属性。这是一个例子：

  var Item = React.createClass({

    content: function() {
       if(this.props.n==1) {
         return [<td calSpan={2}> Colspan</td>]
       }

       if(this.props.n==2) {
         return [<td> Td-1</td>, <td> Td-2</td>]
       }
    },

    render: function() {
            return (<tr> {this.content()}</tr>);
    }
    });

此组件渲染一次。更改后，反应js尝试重新渲染并崩溃并出现错误（Uncaught TypeError：无法读取undefined react.js：1079的属性'parentNode'）（在Chrome中）。但在jsfiddle它的工作正常。下面是示例：http://jsfiddle.net/dbazylev/x5p3C/9/（单击表格进行重新渲染）。如果你从jsfiddle复制代码并在浏览器中执行它，代码就会崩溃。

我找到了一些解决方法。替换

 return [<td calSpan={2}> Colspan</td>]

到

  return [<td calSpan={2}> Colspan</td>, <td></td>]

它不是有效的HTML，但它的工作原理。为什么会出现此错误？如何以另一种（更好的）方式解决？

Answer 1

这是由tr元素中的无关空间引起的;变化

<tr> {this.content()}</tr>

到

<tr>{this.content()}</tr>

React将空格呈现为span元素，但由于tr元素只能包含td个元素，因此浏览器会将它们排在表格之外：