将数组对象放入 Material-UI 表格中,可以按照以下步骤进行:
import React from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@material-ui/core';
const MyTable = () => {
const data = [
{ id: 1, name: 'John', age: 25 },
{ id: 2, name: 'Jane', age: 30 },
{ id: 3, name: 'Bob', age: 35 },
];
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell>ID</TableCell>
<TableCell>Name</TableCell>
<TableCell>Age</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.id}</TableCell>
<TableCell>{item.name}</TableCell>
<TableCell>{item.age}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
};
<MyTable />
组件来展示表格:const App = () => {
return (
<div>
<h1>My App</h1>
<MyTable />
</div>
);
};
这样,你就可以将数组对象放入 Material-UI 表格中展示了。在上述代码中,我们使用了 Material-UI 的 Table
、TableHead
、TableBody
、TableCell
、TableRow
和 TableContainer
组件来创建表格,并使用 map
方法遍历数组对象,将每个对象的属性值渲染到表格的每一行中。
请注意,上述代码中没有提及任何特定的云计算品牌商,因为这个问题与云计算无关。如果你需要了解更多关于 Material-UI 表格的信息,可以参考腾讯云的相关文档和示例代码。
领取专属 10元无门槛券
手把手带您无忧上云