正在用ant design pro 重構(gòu)一個(gè)項(xiàng)目。 有一部分的需求是這樣的

需求描述: 一共三級(jí)類目, 初始加載一級(jí)類目項(xiàng), 點(diǎn)擊一級(jí)類目后請(qǐng)求后臺(tái)返回渲染出二級(jí)類目, 點(diǎn)擊二級(jí)類目請(qǐng)求后臺(tái)返回三級(jí)類目, 需要在三級(jí)類目選中至少一個(gè)的時(shí)候更改一級(jí)和二級(jí)類目為選中狀態(tài)(綠色對(duì)號(hào)), 三級(jí)類目一個(gè)都沒(méi)選的時(shí)候二級(jí)類目是未選中狀態(tài)(灰色框), 一個(gè)二級(jí)類目也沒(méi)選中的時(shí)候一級(jí)類目是未選中狀態(tài),否則是選中狀態(tài)
PS: 只有三級(jí)類目的選中和未選中狀態(tài)是在點(diǎn)擊時(shí)就立即切換, 而一二級(jí)的選中狀態(tài)只有在點(diǎn)擊三級(jí)類目時(shí)候判斷進(jìn)行更改

當(dāng)點(diǎn)擊確認(rèn)添加按鈕時(shí) 判斷二級(jí)類目是否不超過(guò)5個(gè), 超過(guò)彈提醒框, 不超過(guò)把選中的各個(gè)項(xiàng)渲染到一個(gè)<Table/>里
如下圖:

現(xiàn)在后臺(tái)的返回?cái)?shù)據(jù)結(jié)構(gòu)為
一級(jí): [{name: '日化清潔', level: 1, id:'rihuaqingjie'},...]
二級(jí): [{name: '口腔清潔', level: 2, id:'kouqiangqingjie'},...]
三級(jí): [{name: '牙齒護(hù)理', level: 3, id:'yachihuli'},...]

我看到這個(gè)數(shù)據(jù)結(jié)構(gòu)和需求以后 想到的是把請(qǐng)求的數(shù)據(jù)結(jié)構(gòu)改成tree的形式 然后用<Tree> 組件渲染, 是否還有其他更好的辦法去實(shí)現(xiàn)這一部分功能 , 希望各位朋友能指點(diǎn)指點(diǎn)