在React中创建表行可以使用map
方法来遍历数据,并为每个数据项创建一个表行组件。以下是一个示例代码:
import React from 'react';
const Table = ({ data }) => {
return (
<table>
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
{data.map((item, index) => (
<TableRow key={index} item={item} />
))}
</tbody>
</table>
);
};
const TableRow = ({ item }) => {
return (
<tr>
<td>{item.column1}</td>
<td>{item.column2}</td>
<td>{item.column3}</td>
</tr>
);
};
export default Table;
在上面的代码中,Table
组件接收一个data
属性,该属性是一个包含表格数据的数组。使用map
方法遍历data
数组,并为每个数据项创建一个TableRow
组件。TableRow
组件接收一个item
属性,该属性是当前数据项的值。在TableRow
组件中,我们可以根据需要访问item
的各个属性,并将它们渲染为表格行的单元格。
这是一个基本的示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云