我有下面的代码是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,您只能向组件树提供两件事——节点(元素)或节点集合。
这里提供了两个节点(两个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>
)
你能试试下面的方法吗,
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
元素。这可能是错误的原因
我已经遇到过几次了,只需执行以下操作:我喜欢在"return"中保留尽可能多的逻辑。只是一种偏好。
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>
);
}
});