react怎么渲染这种数据?_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

import React from "react";
import "./styles.css";

class App extends React.Component {
  render() {
    let arr = [
      {
        "1": [
          {
            "relationId": "1f72675b-2d63-4815-a918-c219d623fb83",
            "relation_applicationCode": "S-00005001-0001",
            "relation": "1",
            "fraudStrtus": "NEW",
            "esRule": [

            ],
            "broadcastUrl": "http://10.10.39.61/fac/api/anayzeCase/update",
            "color": "#efef2ff2",
            "tenantID": "novaB"
          },
          {
            "relationId": "80b8269d-1a4f-444b-afa9-e5e5f128d6db",
            "relation_applicationCode": "S-00005001-0001003",
            "relation": "1",
            "fraudStrtus": "NEW",
            "esRule": [

            ],
            "broadcastUrl": "http://10.10.39.61/fac/api/anayzeCase/update",
            "color": "#95ff95",
            "tenantID": "novaB"
          }
        ]
      },
      {
        "3": [
          {
            "relationId": "feafe8fd-71434b80a2a",
            "relation_applicationCode": "S-1223340",
            "relation": "3",
            "fraudStrtus": "FRAUD",
            "esRule": [

            ],
            "broadcastUrl": "http://10.10.39.61/fac/api/anayzeCase/update",
            "color": "#95ff95",
            "tenantID": "BankA"
          }
        ]
      }
    ]
    return (
      <ul>
        {(() => {
          arr.forEach((item) => {
            let domArr = [];
            for (let key in item) {
              if (item.hasOwnProperty(key)) {
                let value = item[key];
                console.log(value);
                if (typeof value === "object") {
                  value.forEach((subItem) => {
                    domArr.push(
                      <li>
                        <span>{key}</span>
                        <span>{subItem.color}</span>
                      </li>
                    );
                  });
                  // value.map(subItem => {
                  //   return <li>{subItem.color}</li>
                  // })
                }
              }
            }
            return domArr;
          });
        })()}
      </ul>
    );
  }
}

export default App;

###

{
        data.map(item => {
          return (
            <div>
              {
                Object.entries(item).map(([key, val], index) => {
                  return val.map(subItem => {
                    return <div>{key}: {subItem.name}</div>
                  })
                })
              }
            </div>
          )
        })
      }

遍历测试