Html 有条件地添加表n+；React中的1个表行（<；tr>；）

在react中将jsx表行动态添加到表中时遇到问题

我的情况如下：

如果表行包含子行，则将其添加到主行之外

这是我最初的设计：

        {rows.map((row) => {
        const expanded = _.includes(expandedRows, row.name); // check if row is expanded or not
        const subRows = row.subRows && row.subRows.map((subRow) =>
          <SubRow key={subRow.name} theme={theme} subRow={subRow.name} />);

        return (
          <div>
            <Row
              key={row.name}
              theme={theme}
              handleUpdate={handleUpdate}
              handleExpandOrCollapseRow={handleExpandOrCollapseRow}
            />
            {expanded && row.subRows && subRows}
            {expanded && !row.subRows && <p>No subrows exist</p>}
          </div>
        );
      })

{rows.map（（row）=>{
const expanded=.\ux.includes（expandedRows，row.name）；//检查行是否已展开
const subRows=row.subRows&&row.subRows.map（（subRow）=>
);
返回(
{扩展的&&row.subRows&&subRows}
{扩展的&&！row.subRows&&不存在任何subRows
}
);
})

问题是，在tbody标签中不允许将div作为子项。你知道我如何在不将报税单包装在div中的情况下解决这个问题吗

我想把整个tbody移动到我的Row组件，并有条件地在那里呈现子窗口，但我看不出这有什么帮助，因为我仍然不能在返回中使用任何包装器……我唯一可以使用的包装器是tbody，它只能作为所有行的父行出现一次

---

有什么想法吗？

您可以简单地收集

数组中的
行
，然后返回
数组
，而不是返回一个环绕多个
tr

这里有一个例子
renderTableRows（）{
常量行=[]；
//先推主行
推(
);
//然后推动副轮
row.subRows.forEach（subRow=>
推(
);
);
返回行；
}

然后将renderTableRows（）方法添加到视图中，如下所示
render（）{
if（this.state.isLoading）{
return Table.renderSpinner（）；
}
返回(
{this.renderTableRows（）}
);
}

我不能确定该代码是否适用于您。但是这种模式应该可以帮助您解决您的问题。
为什么不使用
tbody
而不是
div
来包装代码，并从父循环中删除
tbody
。@37因为这样会为每个循环呈现一个tbody。即，每个tr（可能还有subrows）将用tbody包装。我为循环的每个步骤（在map函数中）提供一个可能的解决方案不是返回一个组件，而是返回一个包含行和一些子窗口的组件数组。因此，您可以得到一个数组数组，然后将此结果展平以显示一个组件数组。eah，我建议使用@oliv37方法。事实上，我已经使用此方法添加了一个答案，就像我在react项目中所做的一样。这使用for循环而不是映射可能更简单。在for循环中，您可以执行
result.add（）
然后执行
result.add（subrow）
对于每个subrowst，此操作非常有效！非常感谢您的帮助，您也可以@oliv37。这是“完成”部分一段代码：它包含我的应用程序中一些特定于领域的内容，但我认为应该足够清楚。
renderTableRows() {
    const rows = [];

    // Push the main row first
    rows.push(
        <Row
            key={row.name}
            theme={theme}
            handleUpdate={handleUpdate}
            handleExpandOrCollapseRow={handleExpandOrCollapseRow}
        />
    );

    // Then push the subrows
    row.subRows.forEach(subRow =>
        rows.push(
            <SubRow key={subRow.name} theme={theme} subRow={subRow.name} />
        );
    );

    return rows;
}

render() {
    if( this.state.isLoading ) {
        return Table.renderSpinner();
    }

    return (
        <table>
            { this.renderTableRows() }
        </table>
    );
}