个人中心
gpt4 book ai didi

html - 使用 React 映射 JSON 对象时，如何将 从列转换为行？
转载 作者：行者123 更新时间：2023-12-04 10:58:59 24 4
gpt4 key购买 nike

在 React 16.11.0 中，我使用 map() 函数作为一个简单的 JSON 对象来访问每个元素的值。当 ReactDOM 呈现 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'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div></div>


表输出将在下面显示这些值:

enter image description here

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

enter image description here

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

最佳答案

为每一行创建规则并在这些行上循环，然后在您的数据上循环:

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>
);

关于html - 使用 React 映射 JSON 对象时，如何将 <table> 从列转换为行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58957311/

24 4 0
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com