需要帮助在二维数组上使用 JSX 标记构建双精度 for 循环

Question

我有一个函数，我为它编写了一个二维数组，该数组随机分配真/假值。 数据如下所示：

0: (3) [true, true, false]
1: (3) [false, true, true]
2: (3) [true, true, false]

我正在尝试编写一个函数，该函数将使用 isLit 的 prop 渲染一个 Cell 组件，以等于嵌套数组中相应的真/假值。 我无法正确构建它，如何做到这一点？

const renderboard = () => {
let myBoard = this.createBoard() //this return the above array
let tr = '<tr>'
let cell = '<Cell isLit={'
let cellc = '/>'
let trc = '</tr>'
for (let r = 0; r < nrows; r++) {
tr
for (let c=0; c < ncols; c++) {
cell + myBoard[r][c] + cellc
}
trc
}
}

Answer 1

React 不像 jquery 或 vanilla javascript，你不需要像这样创建元素，你可以使用 map 迭代数组并从中返回元素。 你可以做这样的事情。

const data = [[true, true, false], [false, true, true], [true, true, false]];
function Component() {
return (
<React.Fragment>
{data.map(row => (
<tr>
{row.map(isList => (
<Cell isList={isList} />
))}
</tr>
))}
</React.Fragment>
);
}

Answer 2

Jsx 可以同时包含 JavaScript 和 HTML，这就是 jsx 的美妙之处。在反应中，当我们必须迭代一个数组时，我们使用map函数，map确实返回新数组，因此我们可以从map函数返回HTML。还有一件事，当我们编写JavaScript时，我们会用{}来表达它。

Answer 3

你正在创建像vanila javascript这样的元素。 它不需要在 React 中执行此操作。 通过 React 片段和循环方法的帮助，可以返回自定义组件。