질문

백엔드에서 얻은 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>
 
 );
 }
}

내 출력 여기에 이미지 설명 입력

예상 출력 여기에 이미지 설명 입력

codesandbox에 추가 된 코드 여기에 링크 설명 입력

답변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 속성으로 td 를 한 번만 렌더링하면되므로 index 를 확인해야합니다. 지도 -ing.

출처 : https://stackoverflow.com/questions/63186208/how-to-add-row-span-in-dynamic-json-table-react-js-and-table-cell-data-compariso