React.js錯誤「相鄰JSX元素必須被包裹在一個封閉標記」

Question

我有下面的代碼是被引發錯誤

「相鄰JSX元素必須被包裹在一個封閉標籤」 react.js。它看起來像React不接受相同的標籤，我怎麼顯示錶格數據？

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

對於React，您只能向組件樹（節點（元素）或節點集合）提供兩件事情。

這裏您提供了兩個節點（兩個td s）。您需要將它們包裝在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> 
       );  
       } 
     });