react表格处理

const tableData = {
  template: {
    status: '案件状态',
    date: '案件日期',
    court: '法院',
    caseType: '案件类型',
    party: '当事人',
    party1: '当事人1',
    party2: '当事人2',
    party3: '当事人3',
    party4: '当事人4',
    party5: '当事人5',
    party6: '当事人6',
    party7: '当事人7',
    party8: '当事人8',
  },
  data: [{
    status: '审理中', date: '2018-02-21', court: '杭州拱墅区',
    caseType: '民事',
    party: '测试人',
    party1: '测试人1',
    party2: '测试人2',
    party3: '测试人3',
    party4: '测试人4',
    party5: '测试人5',
    party6: '测试人6',
    party7: '测试人7',
    party8: '测试人8',
  }, {
    status: '接受归档中', date: '2018-03-30', court: '杭州西湖区',
    caseType: '刑事',
    party: '测试人',
    party1: '测试人1',
    party2: '测试人2',
    party3: '测试人3',
    party4: '测试人4',
    party5: '测试人5',
    party6: '测试人6',
    party7: '测试人7',
    party8: '测试人8',
  }],
};

/**
     * 复杂的处理详情展示表单的逻辑
     */
      //定义详情表单的具体容器
    const divContainer = [];
    if (tableData) {
      // 获取表结构中的数据模版
      const template = tableData.template;
      // 获取表结构中的数据模版相对应的数据
      const datas = tableData.data;
      // 如果表结构和数据都不为空，才执行内部逻辑
      if (template && datas) {
        let j = 1; //初始化对象遍历的次数
        // 定义最外层table个数的循环，根据数组中有多少对象决定
        for (let k = 0; k < datas.length; k++) {
          let b1 = ''; //偶数情况下的表单tr、td逻辑<td></td><td></td><td></td><td></td
          let b2 = ''; //奇数情况下的表单tr、td逻辑 ，主要是为了考虑单数情况下，也要相加的可能性<td></td><td></td>
          let b3 = ''; //奇数和偶数同时相加的处理后的逻辑 ，比如<tr><td></td><td></td><td></td><td></td></tr>或者<tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td></tr>
          let data = ''; //定义自增长的字符串，用户短暂存储表格结构，一定要放在循环外
          for (const i in template) {
            if ({}.hasOwnProperty.call(template, i)) {//只有对象中存在这个属性的时候，才会进入此逻辑
              if (j % 2 === 0) { //这地方一定要注意，一次遍历为偶数之后，一定要清空data,使得进入下一次循环
                data += `<td key=${j}>${template[i]}</td><td key=${j}>${datas[k][i]}</td>`;
                b1 += `<tr>${data}</tr>`;
                data = [];
              } else if (j % 2 !== 0) {
                data += `<td key=${j}>${template[i]}</td><td key=${j}>${datas[k][i]}</td>`;
                b2 = `<tr>${data}</tr>`; //用户暂存奇数的数据
              }
              if (j % 2 === 0) {
                b3 = b1; // 偶数的时候，不需要把b2的数据加上
              } else {
                b3 = b1 + b2; // 奇数和偶数时候的数据字符串和
              }
              j += 1;
            }
          }
          j = 1;//这里很关键，因为这段代码用户初始化一组表格之后，进入下一个表格的处理,主要是奇数偶数需要重置状态
          //最后，处理表格头部和身体的拼接工作
          const title = `<tr class=${Style.caseNoTr}><td colSpan="4">案号：${caseNo}</td></tr>`;
          tableTemp = (<table key={k}>
            <tbody dangerouslySetInnerHTML={{ __html: title + b3 }} />
          </table>);
          divContainer[k] = tableTemp; // 这种写法很讨巧，相当于可以把几个数据<table></table><table></table>类似这种的格式拼成一个大的dom结构，具体可以打印试试
        }
      }
    }

// 最后渲染到dom中
return (
<div className={Style.CaseContainer}>
            {divContainer}
          </div>
)