Ошибка рендеринга строки таблицы в реакции

Question

У меня есть проблема с моим реагировать код:

var PostRow = React.createClass({ 
    render: function(){ 
     var loading = <tr><td>one row</td></tr>; 
     return(
      {loading} 
     ) 
    } 
}); 

Я получаю эту ошибку:

Uncaught Invariant Violation: PostRow.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Но это работает:

var PostRow = React.createClass({ 
    render: function(){ 
     return(
      <tr><td>joer</td></tr> 
     ) 
    } 
}); 

Что проблема с моим кодом?

Спасибо!

Answer 1

Все переменные React должны быть заключены в тег HTML.

var PostRow = React.createClass({ 
    render: function(){ 
     var loading = <tr><td>one row</td></tr>; 
     return(
      <div> 
      {loading} 
      </div> 
     ) 
    } 
}); 

Answer 2

После ответа Пранеш, этот код работает:

var PostRow = React.createClass({ 
    render: function(){ 
     var loading = <td>joer</td>; 
     return(
      <tr> 
       {loading} 
      </tr> 
     ) 
    } 
}); 

Answer 3

Дело в том, что вы присваиваете переменной а JSX component и просто делает это. Это дает нарушение, потому что может случиться так, что вы присвоили значение null этой переменной, и тогда вы просто вернете null, что невозможно. Вам нужно что-то вернуть. Так что просто добавить строку в качестве компонента в return() заявлении, это может быть div или table

var PostRow = React.createClass({ 
 
    render: function(){ 
 
     var loading = <tr><td>one row</td></tr>; 
 
     return(
 
      <div>{loading}</div> 
 
     ) 
 
    } 
 
}); 
 
ReactDOM.render(<PostRow/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> 
 
<div id="app"></div>

Answer 4

return { foo } в ES6 является обобщающим для return { foo: foo } в старых версиях JavaScript.

Это означает, что ваша функция рендеринга возвращает простой объект, а не компонент React. Это как ваш код transpiled Бабеля:

var PostRow = React.createClass({ 
    displayName: "PostRow", 

    render: function render() { 
     var loading = React.createElement(
      "tr", 
      null, 
      React.createElement(
       "td", 
       null, 
       "one row" 
      ) 
     ); 
     return { loading: loading }; 
    } 
}); 

Вы можете просто пропустить все эти скобки и просто вернуть переменную:

var PostRow = React.createClass({ 
    render: function(){ 
     var loading = <tr><td>one row</td></tr>; 
     return loading; 
    } 
});