不带结束标签 JSX 的元素推送答案

【问题标题】：Element Push without closing tag JSX不带结束标签 JSX 的元素推送
【发布时间】：2017-02-16 22:53:19
【问题描述】：

我想执行下面的递归函数，问题是ul 因为当函数被调用时，我推了一个ul 标签，在forEach 的末尾我关闭了它。如果我用关闭的</ul> 更改outputArray.push(<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>)
    }

【问题讨论】：

将它们放入数组有什么意义？你想达到什么目的？
只是要渲染成dom。只需要 ul 和 li 来保留结构。
为什么不直接使用纯 JSX 来渲染 ul 并在其中映射数组到 li 元素？
会有多个ul，具体取决于我收到的数据。有点动态。

标签： javascript reactjs jsx

【解决方案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>
)
}

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

【讨论】：

【解决方案2】：

考虑以下结构

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

【讨论】：