react函数组件中如何根据多个对象,遍历成多个表格
时间: 2024-02-20 09:01:57 浏览: 21
你可以先将多个对象存储在一个数组中,然后使用数组的 map 方法遍历数组,在每次遍历中使用 JSX 语法生成一个表格。具体的代码实现可以参考下面的示例:
```jsx
function TableList({ data }) {
return (
<div>
{data.map((item, index) => (
<table key={index}>
<thead>
<tr>
<th>名称</th>
<th>值</th>
</tr>
</thead>
<tbody>
{Object.keys(item).map((key, i) => (
<tr key={i}>
<td>{key}</td>
<td>{item[key]}</td>
</tr>
))}
</tbody>
</table>
))}
</div>
);
}
```
在这个示例中,`TableList` 组件接受一个 `data` 属性,它是一个数组,包含多个对象。组件通过 `data.map` 方法遍历数组,生成多个表格,每个表格中包含对象的键值对。在每个表格中,我们使用 `Object.keys` 方法获取对象的所有键,然后通过 `map` 方法遍历键数组,生成表格的行数据。