在React中有条件地添加表n 1表行（）

Question

我有问题动态添加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>
        );
      })

问题是不允许div作为tbody标记中的子级。你知道我怎样才能不把我的报税单写进div里就解决这个问题吗？

我在考虑将整个tbody移动到我的行组件，并有条件地在那里渲染子行，但是我看不出这有什么帮助，因为我仍然不能在返回周围使用任何包装器...我唯一能使用的包装器是tbody，这只能作为所有行的父级发生一次。

有什么想法吗？

Answer 1

相反，您可以简单地收集数组中的行，然后返回数组。

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

我不能肯定地说，如果代码将为您开箱即用。但是这种模式应该可以帮助你解决问题。