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

Question

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

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

Answer 1

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>))