react antd 多级数组循环

失落的额头
  • 132

问题:如何讲json数据中多层级的数据循环出来?
描述:将数据循环出来后写进如下样式的页面中(antd折叠+table组件)

clipboard.png

备注:尝试了用map方法,但如果数据层级不确定map方法就不行了,怎么破?

clipboard.png

json数据:

{
  "head": {
    "name": "费用明细(借方)",
    "children": [

      {
        "name": "三、折旧费用",
        "children": [
          {
            "name": "用于研发活动的设备的折旧费"
          },
          {
            "name": "用于研发活动的仪器的折旧费"
          }
        ]
      },
      {
        "name": "四、无形资产摊销",
        "children": [
          {
            "name": "用于研发活动的专利权的摊销费用"
          },
          {
            "name": "用于研发活动的软件的摊销费用"
          },
          {
            "name": "用于研发活动的非专利技术(包括许可证、专有技术、设计和计算方法等)的摊销费用"
          }
        ]
      },
      {
        "name": "一、人员人工费用",
        "children": [
          {
            "name": "外聘研发人员的劳务费用"
          },
          {
            "name": "直接从事研发活动人员",
            "children": [
              {
                "name": "五险一金"
              },
              {
                "name": "工资薪金"
              }
            ]
          }
        ]
      },
      {
        "name": "五、新产品设计费等",
        "children": [
          {
            "name": "新产品设计费"
          },
          {
            "name": "新工艺规程制定费"
          },
          {
            "name": "勘探开发技术的现场试验费"
          },
          {
            "name": "新药研制的临床试验费"
          }
        ]
      },
      {
        "name": "六、其他相关费用",
        "children": [
          {
            "name": "技术图书资料费"
          },
          {
            "name": "资料翻译费"
          },
          {
            "name": "会议费"
          },
          {
            "name": "高新科技研发保险费"
          },
          {
            "name": "专家咨询费"
          },
          {
            "name": "差旅费"
          },
          {
            "name": "研发成果相关费用"
          },
          {
            "name": "知识产权相关费用"
          }
        ]
      },
      {
        "name": "二、直接投入费用",
        "children": [
          {
            "name": "用于试制产品的检验费"
          },
          {
            "name": "研发活动直接消耗",
            "children": [
              {
                "name": "材料"
              },
              {
                "name": "燃料"
              },
              {
                "name": "动力费用"
              }
            ]
          },
          {
            "name": "通过经营租赁方式租入的用于研发活动的仪器、设备租赁费"
          },
          {
            "name": "用于不构成固定资产的样品、样机及一般测试手段购置费"
          },
          {
            "name": "用于研发活动的仪器、设备的运行维护、调整、检验、维修等费用"
          },
          {
            "name": "用于中间试验和产品试制的模具、工艺装备开发及制造费"
          }
        ]
      }
    ]
  },
  "data": {
    "total_close_fee": 0,
    "proj_type": "自主研发",
    "month_open": {
      "用于研发活动的设备的折旧费": "0.0",
      "材料": "0.0",
      "技术图书资料费": "0.0",
      "新产品设计费": "0.0",
      "用于试制产品的检验费": "0.0",
      "外聘研发人员的劳务费用": "0.0",
      "五险一金": "0.0",
      "动力费用": "0.0",
      "通过经营租赁方式租入的用于研发活动的仪器、设备租赁费": "0.0",
      "资料翻译费": "0.0",
      "会议费": "0.0",
      "用于不构成固定资产的样品、样机及一般测试手段购置费": "0.0",
      "高新科技研发保险费": "0.0",
      "用于研发活动的仪器、设备的运行维护、调整、检验、维修等费用": "0.0",
      "专家咨询费": "0.0",
      "用于研发活动的专利权的摊销费用": "0.0",
      "用于研发活动的软件的摊销费用": "0.0",
      "新工艺规程制定费": "0.0",
      "差旅费": "0.0",
      "用于研发活动的非专利技术(包括许可证、专有技术、设计和计算方法等)的摊销费用": "0.0",
      "用于研发活动的仪器的折旧费": "0.0",
      "勘探开发技术的现场试验费": "0.0",
      "新药研制的临床试验费": "0.0",
      "用于中间试验和产品试制的模具、工艺装备开发及制造费": "0.0",
      "工资薪金": "0.0",
      "燃料": "0.0",
      "研发成果相关费用": "0.0",
      "知识产权相关费用": "0.0"
    },
    "proj_name": "1111",
    "proj_code": "110000450278685160001",
    "month_close": {
      "用于研发活动的设备的折旧费": "0.0",
      "材料": "0.0",
      "技术图书资料费": "0.0",
      "新产品设计费": "0.0",
      "用于试制产品的检验费": "0.0",
      "外聘研发人员的劳务费用": "0.0",
      "五险一金": "0.0",
      "动力费用": "0.0",
      "通过经营租赁方式租入的用于研发活动的仪器、设备租赁费": "0.0",
      "资料翻译费": "0.0",
      "会议费": "0.0",
      "用于不构成固定资产的样品、样机及一般测试手段购置费": "0.0",
      "高新科技研发保险费": "0.0",
      "用于研发活动的仪器、设备的运行维护、调整、检验、维修等费用": "410.0",
      "专家咨询费": "0.0",
      "用于研发活动的专利权的摊销费用": "0.0",
      "用于研发活动的软件的摊销费用": "0.0",
      "新工艺规程制定费": "0.0",
      "差旅费": "0.0",
      "用于研发活动的非专利技术(包括许可证、专有技术、设计和计算方法等)的摊销费用": "0.0",
      "用于研发活动的仪器的折旧费": "0.0",
      "勘探开发技术的现场试验费": "0.0",
      "新药研制的临床试验费": "0.0",
      "用于中间试验和产品试制的模具、工艺装备开发及制造费": "0.0",
      "工资薪金": "0.0",
      "燃料": "0.0",
      "研发成果相关费用": "0.0",
      "知识产权相关费用": "0.0"
    },
    "total_open_fee": "0.0",
    "eviDetail": [
      {
        "用于研发活动的设备的折旧费": "0.0",
        "evi_abst": "转结转6月科研项目成本费用-其他成本",
        "材料": "0.0",
        "技术图书资料费": "0.0",
        "新产品设计费": "0.0",
        "用于试制产品的检验费": "0.0",
        "外聘研发人员的劳务费用": "0.0",
        "五险一金": "0.0",
        "动力费用": "0.0",
        "通过经营租赁方式租入的用于研发活动的仪器、设备租赁费": "0.0",
        "资料翻译费": "0.0",
        "会议费": "0.0",
        "loan_cost": "410.0",
        "total_type": "总账凭证",
        "fee_purpose": "借",
        "用于不构成固定资产的样品、样机及一般测试手段购置费": "0.0",
        "高新科技研发保险费": "0.0",
        "borrow_cost": "410.0",
        "用于研发活动的仪器、设备的运行维护、调整、检验、维修等费用": "410.0",
        "专家咨询费": "0.0",
        "用于研发活动的专利权的摊销费用": "0.0",
        "用于研发活动的软件的摊销费用": "0.0",
        "新工艺规程制定费": "0.0",
        "差旅费": "0.0",
        "用于研发活动的非专利技术(包括许可证、专有技术、设计和计算方法等)的摊销费用": "0.0",
        "用于研发活动的仪器的折旧费": "0.0",
        "勘探开发技术的现场试验费": "0.0",
        "新药研制的临床试验费": "0.0",
        "用于中间试验和产品试制的模具、工艺装备开发及制造费": "0.0",
        "工资薪金": "0.0",
        "燃料": "0.0",
        "evi_code": "1294370GL1706000025",
        "研发成果相关费用": "0.0",
        "知识产权相关费用": "0.0",
        "total_month": "6",
        "state_code": "1",
        "total_day": "30"
      },
      {
        "用于研发活动的设备的折旧费": "0.0",
        "evi_abst": "FFFFF",
        "材料": "0.0",
        "技术图书资料费": "0.0",
        "新产品设计费": "0.0",
        "用于试制产品的检验费": "0.0",
        "外聘研发人员的劳务费用": "0.0",
        "五险一金": "0.0",
        "动力费用": "0.0",
        "通过经营租赁方式租入的用于研发活动的仪器、设备租赁费": "0.0",
        "资料翻译费": "0.0",
        "会议费": "0.0",
        "loan_cost": "0.0",
        "total_type": "总账凭证",
        "fee_purpose": "借",
        "用于不构成固定资产的样品、样机及一般测试手段购置费": "0.0",
        "高新科技研发保险费": "0.0",
        "borrow_cost": "0.0",
        "用于研发活动的仪器、设备的运行维护、调整、检验、维修等费用": "0.0",
        "专家咨询费": "0.0",
        "用于研发活动的专利权的摊销费用": "0.0",
        "用于研发活动的软件的摊销费用": "0.0",
        "新工艺规程制定费": "0.0",
        "差旅费": "0.0",
        "用于研发活动的非专利技术(包括许可证、专有技术、设计和计算方法等)的摊销费用": "0.0",
        "用于研发活动的仪器的折旧费": "0.0",
        "勘探开发技术的现场试验费": "0.0",
        "新药研制的临床试验费": "0.0",
        "用于中间试验和产品试制的模具、工艺装备开发及制造费": "0.0",
        "工资薪金": "0.0",
        "燃料": "0.0",
        "evi_code": "FFFFF",
        "研发成果相关费用": "0.0",
        "知识产权相关费用": "0.0",
        "total_month": "6",
        "state_code": "1",
        "total_day": "30"
      }
    ]
  }
}

求高人详细指点,十分感谢!

回复
阅读 3.3k
2 个回答

每一条数据不就是name和children吗,单独写一个组件处理name和children好了,递归这个组件。

qms888168
  • 2
新手上路,请多包涵

不是repo.value,而是repo.children

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏