鍍金池/ 問(wèn)答/HTML/ react jsx 如何實(shí)現(xiàn)標(biāo)簽拼接嵌套

react jsx 如何實(shí)現(xiàn)標(biāo)簽拼接嵌套

想實(shí)現(xiàn)一個(gè)jsx的標(biāo)簽嵌套，請(qǐng)問(wèn)該怎么實(shí)現(xiàn)？

數(shù)據(jù)如下：

var data=[
    {
        row: 1,
        name: '第一個(gè)ul下的第一個(gè)li'
    },
    {
        row: 1,
        name: '第一個(gè)ul下的第二個(gè)li'
    },
    {
        row: 2,
        name: '第二個(gè)ul下的第一個(gè)li'
    }
]

對(duì)應(yīng)的html如下：

<ul>
    <li>第一個(gè)ul下的第一個(gè)li</li>
    <li>第一個(gè)ul下的第二個(gè)li</li>
</ul>
<ul>
    <li>第二個(gè)ul下的第一個(gè)li</li>
</ul>
回答
編輯回答
兔囡囡

你可以換一個(gè)方便一點(diǎn)的數(shù)據(jù)結(jié)構(gòu)

var data=[
    {
        data: [
            {
                name: '第一個(gè)ul下的第一個(gè)li'
            },
            {
                name: '第一個(gè)ul下的第二個(gè)li'
            }
        ]
        
    },
    {
        data: [
            {name: '第二個(gè)ul下的第一個(gè)li'}
        ]
    }
]
2017年3月21日 17:43
編輯回答
臭榴蓮

參考鏈接：https://www.cnblogs.com/rysin...

2017年7月5日 01:12
編輯回答
伐木累

如果只有你列出來(lái)的row: 2（視為最大）數(shù)據(jù)，那你filter + map兩次就行。

但是如果是row: N呢？不變換數(shù)據(jù)結(jié)構(gòu)還能處理么？

2017年8月27日 11:40
編輯回答
朕略傻

面對(duì)這種情況，我一般采用的解決思路基本和樓上一樣，做數(shù)據(jù)結(jié)構(gòu)變更,對(duì)數(shù)組進(jìn)行按需拆分

2017年10月14日 16:27