使用React映射JSON对象时如何将<table>从列转换为行？

Question

在 React 16.11.0 中，我将Branches to build: origin/master 函数用于一个简单的JSON对象，以访问每个元素的值。当 ReactDOM 呈现map()时，表将在列中显示content的每个元素的值列表：

data

const data = [
  { Name: "Jame",   Email: "jame123@gmail.com",    ID: "1568132456", City: "New York" },
  { Name: "Harris", Email: "harris456@yahoo.com",  ID: "7666487798", City: "Chicago" },
  { Name: "Daisy",  Email: "daisy789@hotmail.com", ID: "2177897432", City: "Los Angeles" },
  // etc...
];

const Table = ({data}) => {
  const head = (
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>ID</th>
      <th>City</th>
    </tr>
  );

  const body = data.map(element => (
    <tr key={element.ID}>
      <td>{element.Name}</td>
      <td>{element.Email}</td>
      <td>{element.ID}</td>
      <td>{element.City}</td>
    </tr>
  ));

  return (
    <table>
      <thead>{head}</thead>
      <tbody>{body}</tbody>
    </table>
  );
};

ReactDOM.render(<Table data={data}/>, document.querySelector('div'));

该表的输出将在下面显示这些值：

相反，我想要的值将在行中显示，如下表所示：

在这种情况下如何转换表？

Answer 1

为每行创建规则并在这些行上循环，然后在数据上循环：

const data = [
  { Name: "Jame",   Email: 'jame123@gmail.com',   ID: "1568132456", City: "New York" },
  { Name: "Harris", Email: 'harris456@gmail.com', ID: "7666487798", City: "Chicago" },
  { Name: "Daisy",  Email: 'daisy789@gmail.com',  ID: "2177897432", City: "Los Angeles" },
  // etc...
];

const rows = [
  { name: 'Name', render: (item) => item.Name },
  { name: 'Email', render: (item) => item.Email },
  { name: 'ID', render: (item) => item.ID },
  { name: 'City', render: (item) => item.City },
];

const body = rows.map(({ name, render }) => (
  <tr key={name}>
    <td>{name}</td>
    {data.map((item, i) => (
      <td key={i}>{render(item)}</td>
    ))}
  </tr>
));

const content = (
  <div>
    <table>
      <tbody>{body}</tbody>
    </table>
  </div>
);

Answer 2

尝试以下代码：

Object.keys(data[0]).forEach(key => (
  <tr key={key}>
    <td>{key}</td>
    {data
      .map(element => element[key])
      .map(value => (
        <td key={value}>{value}</td>
      ))}
  </tr>
));

您可能想为第二个map（生成td的密钥）找到更好的密钥。