html - 在 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 移动到我的 Row 组件并有条件地在那里呈现子行，但我看不出它有什么帮助，因为我仍然不能在返回周围使用任何包装器......唯一的包装器我可以使用 is tbody，它只能作为所有行的父级出现一次。

有什么想法吗？

Answer 1

您可以简单地将行收集到数组中，而不是返回一个围绕多个tr的包装div > 之后返回 array。

举个例子

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

然后像这样将 renderTableRows() 方法添加到您的 View

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

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

我不能确定该代码是否开箱即用。但是这种模式应该可以帮助您解决问题。