Блог

В react.js Мне нужен компонент, который отображает ‘tr’ с одним или двумя ‘td’, в зависимости от его свойства. Вот пример:

   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: не удается прочитать свойство ‘parentNode’ неопределенного 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, но он работает. Почему возникает эта ошибка? Как это можно решить другим (лучшим) способом?

Это вызвано лишним пробелом в вашем tr элементе; измените

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

Для

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

React отображает пробелы как span элементы, но поскольку tr элементы могут содержать только td элементы, браузер помещает их за пределы таблицы: