元素推动而无需关闭标签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 = [];

您可以按照您的需求进行循环并将其推到ARR1中：

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

然后，您可以将ARR1的整个内容推入ARR2，并用UL标签包裹：

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

然后简单地渲染并返回：

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

当您需要生成带有可变数量的行和col的网格时，这真的很好。

Answer 2

考虑以下结构

let enclosure = [];
loop {
   enclosure.push(jsx);
}
return (<ul>{enclosre}</ul>);