数组对象循环遍历动态生成类似table表

const ExchangeMeta = () => {
  let obj = {
  	//可自由添加任意名称属性
    detail: [
      {
        a: "1",
        b: "2",
        c: "3",
        d: "4",
        //e:"5",
      },
      {
        a: "1",
        b: "2",
        c: "5",
        d: "4",
        //e:"5",
      },
    ]
  }

  const [data, setData] = useState(obj.detail)

  const [row, setRow] = useState<any>()

  useEffect(() => {
    setRow(Object.keys(data[0]))
  }, [])

  return (
    <div>
      {
        data.map((item: any, index: any) => {
          return (
            //遍历每行
            <div key={index} style={{ display: "flex" }}>
              {
                //遍历每列
                row && row.length > 0 ? row.map((item1: any, index1: number) => {
                  return (
                  	//控制是否隐藏
                    item[item1] !== "3" ?
                      <div key={index1} >
                        <div style={{ width: "10px" }}>{item[item1]}</div>
                      </div> : <div style={{ width: "10px" }}></div>
                  )
                }) : ""
              }
            </div>
          )
        })
      }
    </div>
  )
}

展示图如下