JSON数据变成模板字符串渲染页面

小张收到一个需求 根据不同入参后端返回不同的JSON数组 类似这样的

let a = {
  "studentId": {
    "value": "zy1106169",
    "desc": "学号"
  },
  "awards": {
    "value": [
      {
        "institute": {
          "value": {
            "otherLeader": {
              "valueItem": {
                "gender": {
                  "desc": "性别"
                },
                "name": {
                  "desc": "姓名"
                },
                "age": {
                  "desc": "年龄"
                }
              },
              "desc": "其他领导"
            },
            "level": {
              "desc": "级别"
            },
            "title": {
              "valueItem": {},
              "desc": "头衔"
            },
            "masterLeader": {
              "value": {
                "gender": {
                  "desc": "性别"
                },
                "name": {
                  "desc": "姓名"
                },
                "age": {
                  "desc": "年龄"
                }
              },
              "desc": "主要领导"
            },
            "instituteName": {
              "desc": "机构名称"
            }
          },
          "desc": "颁奖机构"
        },
        "awardDate": {
          "value": "20131211",
          "desc": "获奖日期(格式 yyyyMMdd)"
        },
        "awardName": {
          "value": "ACM TOP",
          "desc": "奖项名称"
        }
      },
      {
        "institute": {
          "value": {
            "otherLeader": {
              "valueItem": {
                "gender": {
                  "desc": "性别"
                },
                "name": {
                  "desc": "姓名"
                },
                "age": {
                  "desc": "年龄"
                }
              },
              "desc": "其他领导"
            },
            "level": {
              "desc": "级别"
            },
            "title": {
              "valueItem": {},
              "desc": "头衔"
            },
            "masterLeader": {
              "value": {
                "gender": {
                  "desc": "性别"
                },
                "name": {
                  "desc": "姓名"
                },
                "age": {
                  "desc": "年龄"
                }
              },
              "desc": "主要领导"
            },
            "instituteName": {
              "desc": "机构名称"
            }
          },
          "desc": "颁奖机构"
        },
        "awardDate": {
          "value": "20051211",
          "desc": "获奖日期(格式 yyyyMMdd)"
        },
        "awardName": {
          "value": "NOI TOP",
          "desc": "奖项名称"
        }
      },
      {
        "institute": {
          "value": {
            "otherLeader": {
              "valueItem": {
                "gender": {
                  "desc": "性别"
                },
                "name": {
                  "desc": "姓名"
                },
                "age": {
                  "desc": "年龄"
                }
              },
              "desc": "其他领导"
            },
            "level": {
              "desc": "级别"
            },
            "title": {
              "valueItem": {},
              "desc": "头衔"
            },
            "masterLeader": {
              "value": {
                "gender": {
                  "desc": "性别"
                },
                "name": {
                  "desc": "姓名"
                },
                "age": {
                  "desc": "年龄"
                }
              },
              "desc": "主要领导"
            },
            "instituteName": {
              "desc": "机构名称"
            }
          },
          "desc": "颁奖机构"
        },
        "awardDate": {
          "value": "20061211",
          "desc": "获奖日期(格式 yyyyMMdd)"
        },
        "awardName": {
          "value": "IOI TOP",
          "desc": "奖项名称"
        }
      }
    ],
    "desc": "获奖列表"
  },
  "basicInfo": {
    "value": {
      "gender": {
        "value": "male",
        "desc": "性别"
      },
      "name": {
        "value": "zjs",
        "desc": "姓名"
      },
      "age": {
        "value": "18",
        "desc": "年龄"
      }
    },
    "desc": "基本信息"
  }
}

是不是很长？
只是想让大家看一下 层次有很多 desc是要显示的内容 有无value也很重要 最终都是字符串形式
OK 简化一下

'{"studentId":{"value":"zy1106169","desc":"学号"},"awards":{"value":[{"institute":{"value":
{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年
龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头
衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年
龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":
{"value":"20131211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"ACM TOP","desc":"奖
项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":
{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":
{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":
{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名
称"}},"desc":"颁奖机构"},"awardDate":{"value":"20051211","desc":"获奖日期(格式 
yyyyMMdd)"},"awardName":{"value":"NOI TOP","desc":"奖项名称"}},{"institute":{"value":
{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":
"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头
衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"
年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":
{"value":"20061211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"IOI TOP","desc":"奖
项名称"}}],"desc":"获奖列表"},"basicInfo":{"value":{"gender":{"value":"male","desc":"性
别"},"name":{"value":"zjs","desc":"姓名"},"age":{"value":"18","desc":"年龄"}},"desc":"基本信
息"}}';

一开始 对于这种 写了一个方法

function draw(obj, layer) {
  let desc = obj.desc;
  let value = obj.value;
  if(value == null) { // 空数组或空字符串的情况
      let valueItem = obj.valueItem;
      if(valueItem == null) { // 空字符串
          console.log(genSpace(layer), desc);
      } else if (JSON.stringify(valueItem) == "{}") { //空字符串数组
          console.log(genSpace(layer), desc, "", "+");
      } else { // 空数组
          console.log(genSpace(layer), desc, "+");
          for(let i in valueItem) {
              draw(valueItem[i], layer + 1);
          }
      }
  } else {
      if(value == null || typeof(value) == "string") { // 字符串的情况
          console.log(genSpace(layer), desc, value);
      } else if(value instanceof Array) {
          console.log(genSpace(layer), desc, "+");
          for(let item of value) {
              for(let i in item) {
                  draw(item[i], layer + 1);
              }
          }
      } else if(typeof(value) == "object") { // 对象的情况
          console.log(genSpace(layer), desc, ": ");
          for(let i in value) {
              draw(value[i], layer + 1);
          }
      }
  }
}

/**
* 用来生成缩进格式用的
* @param layer
* @returns {string}
*/
function genSpace(layer) {
  let space = "";
  for(let i = 0; i < layer; i ++) {
      space += "    ";
  }
  return space;
}

let str = '{"studentId":{"value":"zy1106169","desc":"学号"},"awards":{"value":[{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20131211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"ACM TOP","desc":"奖项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20051211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"NOI TOP","desc":"奖项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20061211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"IOI TOP","desc":"奖项名称"}}],"desc":"获奖列表"},"basicInfo":{"value":{"gender":{"value":"male","desc":"性别"},"name":{"value":"zjs","desc":"姓名"},"age":{"value":"18","desc":"年龄"}},"desc":"基本信息"}}'
let obj = JSON.parse(str);

let wrap = {};
wrap.desc = "SUPER";
wrap.value = obj;

draw(wrap, 0);

需求是要有的判断条件输出的标签应该去包裹别的判断条件的标签 但是 这个方法 打印出来的都可以 也可以push到一个数组里 但是只有一层
最终的解决办法是

function draw(obj, arrayItem = false) {
  let desc = obj.desc || 'Item';
  let value = obj.value || obj.valueItem;

  if (value === void 0 && arrayItem) {
    value = obj
  }
  let type = getType(value);

  let valueContent = '';
  let descHtml = `<div class="desc">${desc}</div>`;

  switch (type) {
    case 'Array':
      for (let i = 0; i < value.length; i++) {
        valueContent += draw(value[i], true);
      }
      break;
    case 'Object':
      for (const key in value) {
        if (value.hasOwnProperty(key)) {
          valueContent += draw(value[key]);
        }
      }
      break;
    default:
      valueContent = value || `<input/>`;
      break;
  }

  let valueHtml = `<span class="${arrayItem ? 'item' : 'value'}" style={{ color: 'red' }}>${valueContent}</span>`;

  return arrayItem ? valueHtml : `<div class="item">${descHtml}${valueHtml}</div>`
}

function getType(val) {
  return Object.prototype.toString.call(val).slice(8, -1);
}

let str =
  '{"studentId":{"value":"zy1106169","desc":"学号"},"awards":{"value":[{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20131211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"ACM TOP","desc":"奖项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20051211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"NOI TOP","desc":"奖项名称"}},{"institute":{"value":{"otherLeader":{"valueItem":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"其他领导"},"level":{"desc":"级别"},"title":{"valueItem":{},"desc":"头衔"},"masterLeader":{"value":{"gender":{"desc":"性别"},"name":{"desc":"姓名"},"age":{"desc":"年龄"}},"desc":"主要领导"},"instituteName":{"desc":"机构名称"}},"desc":"颁奖机构"},"awardDate":{"value":"20061211","desc":"获奖日期(格式 yyyyMMdd)"},"awardName":{"value":"IOI TOP","desc":"奖项名称"}}],"desc":"获奖列表"},"basicInfo":{"value":{"gender":{"value":"male","desc":"性别"},"name":{"value":"zjs","desc":"姓名"},"age":{"value":"18","desc":"年龄"}},"desc":"基本信息"}}';
let obj = JSON.parse(str);

let wrap = {};
wrap.desc = 'SUPER';
wrap.value = obj;

// console.log(wrap)

const result = draw(wrap);
console.log(result)

但是！ 但是！ 因为是模板字符串 所以与antd一起使用会引起冲突

比如 这样<span class="${arrayItem ? 'item' : 'value'}" style={{ color: 'red' }}>${valueContent}</span>是可以的
但是调用antd里的组件 模板字符串被浏览器解析时 antd的api会被转译（toString）

`<Form.Item>
   { 
     ${getFieldDecorator('username')(
       <Input placeholder=""/>
     )}    //这里会被浏览器解析出[object object]的dom
  }
</Form.Item>`

所以这个方法也相当于失败了