Multiple recursive 在同一个[[？

Question

我想在React中进行Treeview渲染。我有TreeNode类，该类以递归方式呈现子级。所以基本上我想这样：

class TreeNode extends React.Component {
    render() {
        let nestedLevel = this.props.level || 0;
        let childNodes = this.props.node.childNodes.map(function(node, index) {
            return <TreeNode key={index} node={node} level={nestedLevel+1} />
        });
        let identationMargin={margin: (nestedLevel*16)+"px"};
        return (
            <tr className="treeview-row">
                <td><span style={identationMargin} />User {this.props.node.name}</td>
            </tr>
            {childNodes}
        );
    }
}

如您所知，返回错误，可悲的是，我只需要返回一个元素，例如div左右。但是当涉及到表jsx时，似乎感到很恶心。如何摆脱困境？
这里是一个question about multiple tbody，但是..“那么我们如何将一个琴身放入另一个琴身中？ 
或者我应该先在js中填充“行”的数组，然后在单个返回中（在第二个组件中）呈现它们，例如：
class TreeView render() {
   rows=[];
   for(node of allNodes)
      rows.push(<TreeNode node={node}>);
   return (
      <table>
        <tbody>
          { rows }
...

典型的通用做法是什么？

Answer 1

嗨，为什么不能将两个元素包装在React.Fragment中？像这样

class TreeNode extends React.Component {
    render() {
        let nestedLevel = this.props.level || 0;
        let childNodes = this.props.node.childNodes.map(function(node, index) {
            return <TreeNode key={index} node={node} level={nestedLevel+1} />
        });
        let identationMargin={margin: (nestedLevel*16)+"px"};
        return (
            <React.fragment> 
                <tr className="treeview-row">
                    <td><span style={identationMargin} />User {this.props.node.name}</td>
                </tr>
                {childNodes}
            </React.fragment>
        );
    }
}

Answer 2

有一个纯HTML / CSS解决方案。

[无论何时从树中构建表，都应使用<table>，<tr>，<td>标记或它们的CSS等效项table，table-row和table-cell，并将display:contents应用于那些您可以不破坏表而保留表的结构，而不破坏表的布局。

请参见this fiddle以获取工作示例。