javascript - 没有关闭标签的元素推送 JSX

Question

我想执行下面的递归函数，问题是ul因为当函数被调用时，我正在推送一个 ul标记并位于 forEach 的末尾我正在关闭它。如果我改变 outputArray.push(<ul>)随着结束</ul>然后它工作正常，但这不符合我的目的。

有什么办法吗？

注意:这是一个递归函数。

function flatten(data, outputArray) {
      outputArray.push(<ul>)
        data.forEach(function (asset){
            if(asset.children.length) {
              outputArray.push(<li><button onClick={_ => this.appendAssets(asset.name)}>{asset.name}</button></li>);
              flatten(asset.children, outputArray);
            }
            else{
              outputArray.push(<li><button onClick={_ => this.appendAssets(asset.name)}>{asset.name}</button></li>);
            }
        });
      outputArray.push(</ul>)
    }

Answer 1

你做的最好的事情是:

let arr1 = [];
let arr2 = [];

您可以循环并将尽可能多的 JSX li 插入 arr1:

arr1.push(<li>Some content</li>);

然后您可以将 arr1 的全部内容推送到 arr2，用 ul 标签包裹:

arr2.push(<ul>{arr1}</ul>);

然后简单地渲染并返回它:

render(){
return (
<div>{arr2}</div>
)
}

当您需要生成行数和列数可变的网格时，这种方法非常有效。