React.js errore "elementi adiacenti JSX deve essere avvolto in un tag racchiude"

Question

Ho il codice sotto è react.js che sta gettando un errore

"elementi adiacenti JSX devono essere confezionate in un tag racchiude". Sembra che React non accetti gli stessi tag l'uno accanto all'altro come faccio a visualizzare i dati tabulari?

var TestRecords = React.createClass({  
    render: function() { 
     return(
     <table> 
      <tr> 
      {this.props.records.map(record=>{ 
       return <td>{record.title}</td><td>record.id</td> 
      } 
     )} 
     </tr> 
     </table> 
    );  
    } 
}); 

Answer 1

Con Reagire, è possibile fornire solo due cose a un albero componente - un nodo (elemento) o un insieme di nodi.

Qui stai fornendo due nodi (due td s). È necessario avvolgerli in un tr o restituirli come array (con gli attributi key). Anche meno ideale in questo esempio poiché sembra che il tuo generatore dovrebbe probabilmente includere tr in primo luogo.

Prova

return (
    <table> 
    {this.props.records.map(record => (// implicit return 
     <tr key={record.id}> 
     <td>{record.title}</td> 
     <td>{record.id}</td> 
     </tr> 
    )} 
    </table> 
) 

Answer 2

Puoi provare come sotto,

var TestRecords = React.createClass({  
    render: function() { 
     return(
     <table> 
      <tr> 
      {this.props.records.map(record=>{ 
       return 
       <tr> 
       <td>{record.title}</td> 
       <td>record.id</td> 
       </tr> 
      } 
     )} 
     </tr> 
     </table> 
    );  
    } 
}); 

errore è perché la mappa sta cercando di restituire due td elementi. Quale potrebbe essere il motivo dell'errore

Answer 3

Ho attraversato che alcune volte, basta fare quanto segue: Mi piace mantenere la logica fuori dal "ritorno" possibile. Solo una preferenza

var TestRecords = React.createClass({  

     render: function() { 
     var trDisplay = this.props.records.map((record, idx)=>{ 
           return(
            <tr key={idx}> 
            <td>{record.title}</td><td>{record.id}</td> 
            </tr> 
            } 
         )} 

       return(
         <table> 
          {trDisplay} 
        </table> 
       );  
       } 
     });