我正在尝试使用此示例创建动态表 - Dynamic & Complex rowspan in HTML table
我正在尝试在react.js中复制类似的事情
如果索引为 0,我会在条件渲染中放置一个结束 tr 标记。 但是,它给了我“预期的 <> 相应的 JSX 结束标记”
我从后端获得的状态“数据”对象类似于 -
{
"100": [
"ABC"
],
"101": [
"123",
"DEF",
"XYZ",
"456",
"657",
"1234",
"4564",
"vdfgx",
"vcegefgg",
"g544"
]
}
我在组件中编写了以下代码来创建动态表。
<table>
<thead>
<tr>
<th>Code</th>
<th>Reason</th>
</tr>
</thead>
<tbody>
{Object.keys(this.state.data).map(
(error_code, i) => {
return (
<React.Fragment>
<tr>
<td
rowSpan={
this.state.data[
error_code
].length
}
key={i}
>
{error_code}
</td>
{this.state.data[
error_code
].map((error_description, index) => (
<React.Fragment>
{index === 0 ? (
<React.Fragment>
<td
key={index}
rowSpan="1"
>
{error_description}
</td>
</tr> //<--- HERE
</React.Fragment>
) : (
<tr>
<td
key={index}
rowSpan="1"
>
{error_description}
</td>
</tr>
)}
</React.Fragment>
))}
</React.Fragment>
);
}
)}
</tbody>
</table>
我想要最终的输出 -
<tbody>
<tr>
<td rowspan="1">100</td>
<td rowspan="1">ABC</td>
</tr>
<tr>
<td rowspan="10">101</td>
<td rowspan="1">123</td>
</tr>
<tr>
<td rowspan="1">DEF</td>
</tr>
<tr>
<td rowspan="1">XYZ</td>
</tr>
<tr>
<td rowspan="1">456</td>
</tr>
.....
</tbody>
有人可以指导我正确的方法来实现所需的输出吗?
最佳答案
JSX 与 XML 一样,需要正确的嵌套 <><tr>...</tr></>
并且不支持重叠标签,如 <><tr></></tr>
。您需要以保留正确嵌套的方式构建代码:
<tbody>
{Object.keys(this.state.data).map((error_code, i) => {
return this.state.data[error_code].map((error_description, index) =>
index === 0 ? (
<tr>
<td rowSpan={this.state.data[error_code].length} key={i}>
{error_code}
</td>
<td key={index} rowSpan="1">
{error_description}
</td>
</tr>
) : (
<tr>
<td key={index} rowSpan="1">
{error_description}
</td>
</tr>
)
)
})}
</tbody>
关于javascript - React.js-具有行跨度的动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57353960/