如何在动态Json表React JS和表单元格数据比较中添加Row Span

Question

我从后端获得的JSON数据具有动态键和值。下面的数据是我需要将第一列值转换为rowSpan的示例方法数据之一，这是我的要求。这可能用于rowspan并比较单元格数据的数值并为其添加图标吗。。？请给我溶液

data= [
{carrier: "Emirates", range: "min", "Jul 29": 1275, "Jul 30": 1325},
{carrier: "Emirates",  range: "med", "Jul 29": 1275, "Jul 30": 1338},
{carrier: "Emirates",  range: "max", "Jul 29": 1275, "Jul 30": 1375},
{carrier: "rehlat",  range: "min", "Jul 29": 1138, "Jul 30": 1306},
{carrier: "rehlat",  range: "med", "Jul 29": 1198, "Jul 30": 1330},
{carrier: "rehlat", range: "max", "Jul 29": 1258, "Jul 30": 1354}]

下面给出了我正在使用的代码

const RenderRow = (props) =>{
return props.keys.map((key, index)=>{
return <td>{props.data[key]}</td>
})
}

class Mycomponent extends Component {

constructor(props){
super(props);
this.getHeader = this.getHeader.bind(this);
this.getRowsData = this.getRowsData.bind(this);
this.getKeys = this.getKeys.bind(this);
}

getKeys = function(){
return Object.keys(this.props.data[0]);
}

getHeader = function(){
var keys = this.getKeys();
return keys.map((key, index)=>{
return <th key={key}>{key.toUpperCase()}</th>
})
}

getRowsData = function(){
var items = this.props.data;
var keys = this.getKeys();
return items.map((row, index)=>{
return <tr key={index}><RenderRow key={index} data={row} keys={keys}/></tr>
})
}

render() {
return (
<div>
<table>
<thead>
<tr>{this.getHeader()}</tr>
</thead>
<tbody>
{this.getRowsData()}
</tbody>
</table>
</div>

);
}
}

我的输出在此处输入图像描述

预期输出在此处输入图像描述

在codesandbox中添加的代码在此处输入链接描述

Answer 1

我相信它需要很多改进，但作为一个开始，请尝试这个代码沙盒

https://codesandbox.io/s/serene-gauss-ffs5d

let keys = this.state.data.reduce(function(a, e) {
let estKey = e["carrier"];
(a[estKey] ? a[estKey] : (a[estKey] = null || [])).push(e);
return a;
}, {});

整个想法是按照您想要的属性进行分组，然后，在您知道基于您的属性有多少项之后，您可以循环并渲染等效的行和td。

return Object.keys(keys).map((key, index) => {
return keys[key].map((obj, index2) => {
return (
<tr key={index} style={{ borderWidth: 1, borderColor: "red" }}>
<RenderRow
key={index2}
idx={index2}
data={obj}
keys={key}
rows={keys[key].length}
/>
</tr>
);
});
});

因此，您获取按数组分组的所有键，然后应用map函数。对于每个键，您获取等效的列表(reduce函数就是这样做的(，并在该列表中循环。每个列表应该创建list.length行，但只有第一行应该具有具有rowSpan属性的<td>。

这里的关键也是要知道，您只需要使用rownSpan属性渲染1次td，因此在map渲染时需要检查index。