javascript - 使用不同的子元素数量重新渲染后，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>);
    }
    });

该组件一次渲染效果良好。更改属性后，React js 尝试重新渲染并崩溃并出现错误(Uncaught TypeError: Cannot read property 'parentNode' of undefined react.js:1079 )(在 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 元素，浏览器将它们粘贴到表格之外: