使用React映射JSON对象时如何将<table>从列转换为行？
y
在React 16.11.0中，我使用map()了一个简单JSON对象的函数来访问每个元素的值。当ReactDOM呈现时content，表格将在列中为的每个元素显示值列表data：
const data = [
{ Name: "Jame", Email: "[email protected]", ID: "1568132456", City: "New York" },
{ Name: "Harris", Email: "[email protected]", ID: "7666487798", City: "Chicago" },
{ Name: "Daisy", Email: "[email protected]", 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>该表的输出将在下面显示这些值：
取而代之的是，我想要的是将为每个元素的行显示值，如下表所示：
在这种情况下如何转换表？
阿波罗
为每行创建规则并在这些行上循环，然后在数据上循环：
const data = [
{ Name: "Jame", Email: '[email protected]', ID: "1568132456", City: "New York" },
{ Name: "Harris", Email: '[email protected]', ID: "7666487798", City: "Chicago" },
{ Name: "Daisy", Email: '[email protected]', 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>
);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Qt Creator Windows 10 - “使用 jom 而不是 nmake”不起作用
- 2
使用next.js时出现服务器错误，错误：找不到react-redux上下文值；请确保组件包装在<Provider>中
- 3
SQL Server中的非确定性数据类型
- 4
Swift 2.1-对单个单元格使用UITableView
- 5
如何避免每次重新编译所有文件？
- 6
在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID
- 7
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 8
应用发明者仅从列表中选择一个随机项一次
- 9
在 Avalonia 中是否有带有柱子的 TreeView 或类似的东西？
- 10
HttpClient中的角度变化检测
- 11
在Wagtail管理员中，如何禁用图像和文档的摘要项？
- 12
如何了解DFT结果
- 13
Camunda-根据分配的组过滤任务列表
- 14
错误：找不到存根。请确保已调用spring-cloud-contract：convert
- 15
为什么此后台线程中未处理的异常不会终止我的进程？
- 16
构建类似于Jarvis的本地语言应用程序
- 17
使用分隔符将成对相邻的数组元素相互连接
- 18
您如何通过 Nativescript 中的 Fetch 发出发布请求？
- 19
通过iwd从Linux系统上的命令行连接到wifi（适用于Linux的无线守护程序）
- 20
使用React / Javascript在Wordpress API中通过ID获取选择的多个帖子/页面
- 21
使用 text() 獲取特定文本節點的 XPath
我来说两句