react jsx 如何实现标签拼接嵌套

Question

想实现一个jsx的标签嵌套，请问该怎么实现？

数据如下：

var data=[
    {
        row: 1,
        name: '第一个ul下的第一个li'
    },
    {
        row: 1,
        name: '第一个ul下的第二个li'
    },
    {
        row: 2,
        name: '第二个ul下的第一个li'
    }
]

对应的html如下：

<ul>
    <li>第一个ul下的第一个li</li>
    <li>第一个ul下的第二个li</li>
</ul>
<ul>
    <li>第二个ul下的第一个li</li>
</ul>

Answer 1

你可以换一个方便一点的数据结构

var data=[
    {
        data: [
            {
                name: '第一个ul下的第一个li'
            },
            {
                name: '第一个ul下的第二个li'
            }
        ]
        
    },
    {
        data: [
            {name: '第二个ul下的第一个li'}
        ]
    }
]

Answer 2

参考链接：https://www.cnblogs.com/rysin...

Answer 3

面对这种情况，我一般采用的解决思路基本和楼上一样，做数据结构变更,对数组进行按需拆分

Answer 4

如果只有你列出来的row: 2（视为最大）数据，那你filter + map两次就行。

但是如果是row: N呢？不变换数据结构还能处理么？