我有下面的代码是 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>
);
}
});
使用 React，您可能只为组件树提供两件事 - 一个节点（元素）或一组节点。
在这里，您提供了两个节点（两个tds）。您需要将它们包装在 a 中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>
)
你可以尝试如下，
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元素。这可能是错误的原因
我已经遇到过几次，只需执行以下操作：我喜欢尽可能将逻辑排除在“返回”之外。只是一个偏好。
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>
);
}
});