在 React 中有条件地添加表 n+1 表行 (<tr>)

Posted 2023-02-22

【中文标题】在 React 中有条件地添加表 n+1 表行 (<tr>)

【英文标题】：Conditionally add table n+1 table rows (<tr>) in React

【发布时间】：2017-08-29 19:12:29

【问题描述】：

我在将 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>
        );
      )

问题是 tbody 标记中不允许 div 作为子项。有什么想法可以在不将我的回报包装在 div 中的情况下解决这个问题吗？

我正在考虑将整个 tbody 移动到我的 Row 组件并有条件地在那里渲染子行，但我看不出它会有什么帮助，因为我仍然无法在返回周围使用任何包装器......唯一的包装器我可以使用 is tbody 并且它只能作为所有行的父级出现一次。

有什么想法吗？

【问题讨论】：

为什么不用tbody 而不是div 包装你的代码并从父级中删除tbody？

@oliv37 因为这样它就会为每个循环渲染一个 tbody 。即每个 tr（可能还有子行）都将用 tbody 包裹。

我给你一个可能的解决方案，对于循环的每一步（在 map 函数中）而不是返回一个组件，你返回一个包含行和可能一些子行的组件数组。结果你得到一个数组数组，然后你可以展平这个结果来显示一个组件数组

是的，我会推荐@oliv37 方法。事实上，我已经使用这种方法添加了一个答案，就像我在我的 react 项目中一样。

使用 for 循环而不是 map 可能更简单。在 for 循环中，您可以为每个子行执行 result.add(<Row ...>) 然后 result.add(subrow)

【参考方案1】：

您可以简单地将rows 收集到array 中，然后返回array，而不是返回一个包裹的div。

这是一个例子

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() 方法添加到您的视图中

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

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

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

【讨论】：

这很完美！非常感谢您的帮助，以及@oliv37。这是“完成”的一段代码：pastebin.com/eeCi1DYZ 它包含我的应用程序中的一些特定于域的内容，但我认为应该足够清楚。