React.js Fehler

Question

Ich habe den Code unten ist react.js „Benachbarte JSX Elemente müssen in einem umschließenden Tag enthalten sein“, die einen Fehler wirft

„Benachbarte JSX Elemente in einem umschließenden Tag gewickelt werden muss“. Es sieht so aus, als ob React nicht dieselben Tags nebeneinander akzeptiert. Wie zeige ich Tabellendaten an?

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

Mit Reagieren können Sie nur zwei Dinge zu einem Komponentenbaum - ein Knoten (Element) oder eine Sammlung von Knoten.

Hier stellen Sie zwei Knoten zur Verfügung (zwei td s). Sie müssen sie entweder in eine tr oder als ein Array (mit key Attribute) zurückgeben. Auch in diesem Beispiel weniger ideal, da es scheint, dass Ihr Generator wahrscheinlich tr an erster Stelle enthalten sollte.

Versuchen

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

Können Sie wie unten versuchen,

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> 
    );  
    } 
}); 

Fehler ist, weil die Karte zurückzukehren zwei td Elemente versucht. Was könnte der Grund für den Fehler sein

Answer 3

Ich habe das ein paar Mal überfahren, tun Sie einfach Folgendes: Ich mag so viel Logik aus der "Rückkehr" wie möglich zu halten. Nur eine Vorliebe.

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> 
       );  
       } 
     });