Javascript REACT.JS填充自定义表头和表体

我试图用一个对象数组填充一个表头和表体。我觉得这样做效率很低。有更好的方法吗

clients:
            [
                {
                    Id: 0,
                    Name: "Camren Moore",
                    Country: "Wierdo Land",
                    City: "Oud-Turnhout",
                    Salary: "$36,738",
                    Actions: null,
                },
                {
                    Id: 1,
                    Name: "Adison Moore",
                    Country: "Crazy Land",
                    City: "Oud-Turnhout",
                    Salary: "$23,738",
                    Actions: null,
                }
            ]

let headers=[]；
让body=[]；
设i=0；
for（客户的var客户机）{
如果（i==0）{
for（客户机中的var密钥）{
标题。按（键）；
}
}
i++；
var-ar=[]；
for（标题的var值）
应收账款推送（客户[价值]）；
身体。推（ar）；
}

以下是如何做到这一点

表

组件将数据作为道具。表的头部分是通过从数据数组的第一个对象获取键并映射它们而生成的。通过映射数据并呈现

行

组件列表来生成每个表行

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const data = [
    {
      Id: 0,
      Name: "Camren Moore",
      Country: "Wierdo Land",
      City: "Oud-Turnhout",
      Salary: "$36,738",
      Actions: null
    },
    {
      Id: 1,
      Name: "Adison Moore",
      Country: "Crazy Land",
      City: "Oud-Turnhout",
      Salary: "$23,738",
      Actions: null
    }
]

const Table = props => {
  return (
    <table>
      <thead>
        <tr>
          {Object.keys(data[0]).map(header => (
            <th>{header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {props.data.map(row => (
          <Row column={row} />
        ))}
      </tbody>
    </table>
  );
};

const Row = props => {
  return (
    <tr>
      <td>{props.column.Id}</td>
      <td>{props.column.Name}</td>
      <td>{props.column.Country}</td>
      <td>{props.column.City}</td>
      <td>{props.column.Salary}</td>
      <td>{props.column.Actions == null ? "N.A" : props.column.Actions }</td>
    </tr>
  );
};

function App() {
  return (
    <div className="App">
      <Table data={data} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
常数数据=[
{
Id:0，
姓名：“卡姆伦·摩尔”，
国家：“维尔多土地”，
城市：“乌德图恩霍特”，
薪金：“$36738”，
操作：空
},
{
Id:1，
姓名：“阿迪森·摩尔”，
国家：“疯狂的土地”，
城市：“乌德图恩霍特”，
薪金：“$23738”，
操作：空
}
]
const Table=props=>{
返回(
{Object.keys（数据[0]）.map（头=>(
{header}
))}
{props.data.map（行=>(
))}
);
};
常量行=道具=>{
返回(
{props.column.Id}
{props.column.Name}
{props.column.Country}
{props.column.City}
{props.column.Salary}
{props.column.Actions==null？“N.A”：props.column.Actions}
);
};
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

---

希望这有帮助

这是一个包含两个一行程序的解决方案

const客户端=
[
{
Id:0，
姓名：“卡姆伦·摩尔”，
国家：“维尔多土地”，
城市：“乌德图恩霍特”，
薪金：“$36738”，
操作：空，
},
{
Id:1，
姓名：“阿迪森·摩尔”，
国家：“疯狂的土地”，
城市：“乌德图恩霍特”，
薪金：“$23738”，
操作：空，
}
];
const header=Object.key（客户端[0]）.map（key=>key）；
const body=clients.map（client=>header.map（id=>client[id]）；
console.log（头）
控制台日志（正文）

你能发布一个你正在使用的对象数组的例子吗？@RicardoGonzalez更新。非常感谢。这正是我所希望的。谢谢你帮助我了解JS。