Typescript 为每个数据行递增表中的索引

所以我一直想做一个数据表，我想给它编号。表的外观如下所示：
编号|姓名|姓氏|年龄
1 |亚历克斯|彼得| 25
2|乔|约翰逊| 30

json是什么样子的：

{
"name": "Alex",
"surname": Peter",
"age": 25
}
{
"name": "Joe",
"surname": "Johnson",
"age": 30
}

---

我希望有一个可以对每个数据行重复使用的函数。

您可以创建一个表行组件，并在迭代数据时重用它

const TableRow = ({ rowNo, name, surname, age }) => {
  <tr>
    <td>{rowNo}</td>
    <td>{name}</td>
    <td>{surname}</td>
    <td>{age}</td>
  </tr>;
};

const Table = () => {
  return (
    <table>
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
      </tr>
      {data.map((row, index) => {
        const rowNum = index + 1;
        return <TableRow key={rowNum} rowNo={rowNum} {...row} />;
      })}
    </table>
  );
};

consttablerow=（{rowNo，name，姓氏，age}）=>{
{rowNo}
{name}
{姓}
{age}
;
};
常数表=（）=>{
返回(
不
名称
姓
年龄
{data.map（（行，索引）=>{
const rowNum=索引+1；
返回；
})}
);
};

效果很好，谢谢！