时间戳

首页 > 解决方案 > 在另一个元素中包含 jsx 元素的结束标记

reactjs - 在另一个元素中包含 jsx 元素的结束标记

问题描述

我想遍历单元格并建立一个表格，网格。所以我需要根据条件关闭行标签。

if (index%col == 0 && index/col > i++) board.push( </div> )
if (index%col == 0) rowJSX = board.push(<div className="Board-row">)

标签： reactjs

解决方案

JSX 不是关于字符串连接的。此处的 HTML 标记已转换为React.createElement，因此您不能有条件地关闭标记，例如，您不能有条件地关闭块if(...) { } }

相反，只需将您的数据收集到数组中

row.push({ className: ..., value: });

然后迭代创建 JSX 元素：

row.map(item => <td className={item.className}>{item.value}</td>)

[upd] 并以相同的方式处理行：

rows.map(row => (<tr>
    {row.map(item => <td className={item.className}>{item.value}</td>)}
</tr>))

推荐阅读