React - Map内部的Map函数

Question

我希望使用React创建一个简单的乘法表。我有下面的代码，我试图通过一个数组循环。

{array.map((num) => {
return (
<tr>
<th>{num}</th>
{array.map((x) => {
return <td>{x}</td>;
})}
</tr>
);
})}

我得到错误'num.map不是一个函数'

我知道num不是一个函数，但我想检查是否有一种方法可以创建一个嵌套循环?如果没有，我的替代方案是将字符串转换为JSX，但我想检查是否有一种方法可以先使用map实现这一点。

Answer 1

您可以使用Array.from()创建一系列数字，迭代它们，并生成反应节点:

const renderRange = (start, end, cb) => Array.from(
{ length: end - start + 1 },
(_, i) => cb(i + start)
)
const Demo = () => (
<table>
<tbody>
{renderRange(1, 10, x => (
<tr key={x}>
{renderRange(1, 10, y => (
<td key={x * y}>
{x * y}
</td>
))}
</tr>
))}
</tbody>
</table>
)
ReactDOM.render(
<Demo />,
root
)

td {
border: 1px solid black;
padding: 2px;
}

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>