没有关闭标签 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>
)
}

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