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

Question

我从后端获得的 JSON 数据具有动态键和值。 下面的数据是我需要将第一列值转换为 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>
 
 );
 }
}

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

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

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

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;
    }, {});

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

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 function。 对于每个键，您获取等效列表（这就是reduce function 所做的）并遍历该列表。 每个列表都应该创建list.length行，但只有第一行应该有<td>和rowSpan属性。

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