Javascript 渲染表<；tr>；基于映射循环内ReactJs中的条件的标记

我需要根据以下条件渲染

启动并关闭它：

{grid.map((item, index) => {
    return <React.Fragment key={index}>
        {item.x === 0 ? <tr/> : ""}
        <td id={`td_${item.x}_${item.y}`}>
            {item.name}
        </td>
    </React.Fragment>
})}

---

这段代码在

jsx

语法错误中显示错误。

React组件树不是HTML字符串，它们是对象树。您需要有一个

tr

对象，为其提供一组

td

子对象，然后切换到一个新的

tr

对象并为其提供子对象

理想情况下，更改网格的存储方式，使其包含行以及单元格的子对象/数组

如果你不能做到这一点，你可以在飞行中做到：

const rows = [];
let children = [];
for (const item of grid) {
    if (grid.x === 0 && children.length) {
        rows.push(children);
        children = [];
    }
    children.push(item);
}
if (children.length) {
    rows.push(children);
}

然后呈现：

{rows.map((children, index) => (
    <tr key={index}>
        {children.map(item =>
            <td id={`td_${item.x}_${item.y}`}>
                {item.name}
             </td>
        )}
    </tr>
))}

{rows.map（（子项，索引）=>(
{children.map（项=>
{item.name}
)}
))}

---

您可能需要仔细检查是否存在小的打字错误等，但这是基本的想法：构建一个行数组，其中包含单元格数组。

您能给我们展示一下保存在

网格中的数据吗？
{rows.map((children, index) => (
    <tr key={index}>
        {children.map(item =>
            <td id={`td_${item.x}_${item.y}`}>
                {item.name}
             </td>
        )}
    </tr>
))}