React.js错误"相邻的JSX元素必须包装在一个封闭的标记中"

Question

我有以下代码是react.js,这是一个错误

"相邻的JSX元素必须包装在一个封闭的标签中".看起来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).您需要将它们包装在一个中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>
)