使用for循环在React/JSX中创建ZxZ表

Question

我正在尝试使用React/JSX创建一个5x5表，其中每个单元格都是一个按钮。下面在SandBox中抛出一个错误：

import "./styles.css";
import React from "react";
const makeCell = () => {
return ( 
<td>
<button/>
</td>
)
};
const makeRow = () => {
return( 
<tr>
{
for (let=i; i<=5; i++){
makeCell();
}
}
</tr> 
)
};
const makeTable = () => {
return( 
<table>
{
for (let=i; i<=5; i++){
makeRow();
}
}
</table> 
)  
};
export default function App() {
return (
<div>
<makeTable/>
</div>
);
}

/src/App.js：意外的令牌(16:8(14|15|｛>16| for(let=i；i<=5；i++(｛|^17|makeCell((；18|｝19|｝浏览器

分析错误：意外的令牌14|15|｛>16|(let=i；i<=5；i++(｛|^17|makeCell((；18|｝19|｝(null(

在React中生成ZxZ表最简单、最简洁的方法是什么？你能解释一下为什么这种方法不起作用吗？

Answer 1

Codesandbox链接：https://codesandbox.io/s/amazing-frog-c5h6hv?file=/src/App.js

export default function App() {
return (
<Table />
);
}
const Table = () => {
return (
<table>
<tbody>
{Array(5)
.fill(null)
.map((_, index) => (
<Row key={index} />
))}
</tbody>
</table>
);
};
const Row = () => {
return (
<tr>
{Array(5)
.fill(null)
.map((_, index) => (
<Cell key={index} />
))}
</tr>
);
};

const Cell = () => {
return (
<td>
<button>hello</button>
</td>
);
};