有条件地在React

Question

我遇到了将jsx表行动态添加到react中的表的问题。

我的情况如下：

如果表格行包含子行，请在主行之外添加它们。

这是我最初的设计：

        {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，它只能作为所有行的父级出现一次。

有什么想法吗？

Answer 1

相反，在div的多个tr周围返回一个包裹的rows，您可以在array中简单地收集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; } 。

这是一个例子

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

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

然后将renderTableRows（）方法添加到您的视图中，如此

p

我无法确定该代码是否可以为您提供开箱即用的功能。但这种模式应该可以帮助您解决问题。