React.js त्रुटि

Question

"सटे JSX तत्वों एक संलग्न टैग में लिपटे किया जाना चाहिए" मैं नीचे दिए गए कोड react.js जो एक त्रुटि

फेंक दिया जाता है "सटे JSX तत्वों लिपटे किया जाना चाहिए एक संलग्न टैग में" है। ऐसा लगता है कि प्रतिक्रिया एक दूसरे के बगल में एक ही टैग को स्वीकार नहीं कर रही है मैं टैब्यूलर डेटा कैसे प्रदर्शित करूं?

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

के साथ प्रतिक्रिया, आप केवल एक घटक पेड़ से दो बातें प्रदान कर सकता है - एक नोड (तत्व) या नोड्स का एक संग्रह।

यहां आप दो नोड्स (दो td एस) प्रदान कर रहे हैं। आपको उन्हें tr में लपेटने की आवश्यकता है, या उन्हें एक सरणी (key विशेषताओं के साथ) के रूप में वापस करने की आवश्यकता है। इस उदाहरण में भी कम आदर्श है क्योंकि ऐसा लगता है कि आपके जेनरेटर में पहले स्थान पर tr शामिल होना चाहिए।

प्रयास करें

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

आप नीचे के रूप में की कोशिश कर सकते हैं,

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

त्रुटि क्योंकि नक्शा दो td तत्वों वापस जाने के लिए कोशिश कर रही है। त्रुटि

Answer 3

मैं कुछ बार चला गया हूं, बस निम्न कार्य करें: मुझे जितना संभव हो सके "वापसी" से अधिक तर्क रखना पसंद है। बस एक वरीयता।

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