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