Fehler Rendern einer Tabellenzeile in reagieren

Question

habe ich ein Problem mit meinem reagieren Code:

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

erhalte ich diesen Fehler:

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.

Aber das funktioniert:

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

Was ist das Problem mit meinem Code?

Danke!

Answer 1

Alle React-Variablen sollten in einem HTML-Tag eingeschlossen sein.

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

Answer 2

Nach der Pranesh Antwort, dieser Code funktioniert:

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

Answer 3

Die Sache ist, dass Sie eine Variable eines JSX component zuweisen und nur das zu machen. Es gibt einen Verstoß, weil es passieren kann, dass Sie dieser Variablen null zugewiesen haben und Sie dann nur null zurückgeben, was nicht möglich ist. Sie müssen etwas zurückgeben. Also einfach Ihre Zeile in einer Komponente in der Anweisung return() hinzufügen, könnte es eine div oder ein 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 } in ES6 sein ist eine Abkürzung für return { foo: foo } in älteren Versionen von JavaScript.

Das bedeutet, dass Ihre Renderfunktion ein einfaches Objekt und keine React-Komponente zurückgibt. Dies ist, wie Sie den Code von babel transpiled ist:

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

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

Sie können alle nur überspringen Sie diese Klammern und einfach die Variable zurück:

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