Question

我正在尝试用对象数组填充表头和主体。我觉得这确实效率很低。有更好的方法吗？

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 = [];
let body = [];
let i = 0;

for (var client of clients) {
  if (i === 0) {
    for (var key in client) {
      headers.push(key);
    }
  }
  i++;
  var ar = [];
  for (var value of headers)
    ar.push(client[value]);
  body.push(ar);
}

Answer 1

这里是2条单线解决方案

const 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,
                    }
];
            

const header = Object.keys(clients[0]).map(key => key);
const body = clients.map(client => header.map(id => client[id]));

console.log(header)
console.log(body)

我没有在React中实现它，因为我认为您的问题不是特定于React的。

Answer 2

这是您可以执行的操作。

Table组件将数据作为属性。表的头部是通过从数据数组的第一个对象获取键并将其映射而生成的。通过在数据上映射并呈现Row组件列表来生成每个表行。

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.JS填充自定义表头和主体

2 个答案: