react taro 多级手风琴 taro踩坑

最新推荐文章于 2024-08-29 07:46:29 发布

lullre

最新推荐文章于 2024-08-29 07:46:29 发布

阅读量1.8k

点赞数 2

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/lullre/article/details/121992784

版权

最近在用react+taro开发h5的过程中遇到了一个问题类似于多级联动的树组件，也就是省市区的多级联动选择，由于当时用的是taroui 里面没有这个树组件所以只能自己写最后在翻taro ui文档的时候发现了AtAccordion这个组件也就是常见的折叠面板也叫手风琴当时想的是我能不能用这个做出那种多级联动的效果

这个是文档自带的效果

接下来是实现过程

控制每一级下每个手风琴展开

const [idx1,setidx1]=useState<number>(-1);

const [idx2,setidx2]=useState<number>(-1);

const [idx3,setidx3]=useState<number>(-1);

const [idx4,setidx4]=useState<number>(-1);

const [idx5,setidx5]=useState<number>(-1);

const [selsqcontent,setSelSqContent]=useState<string>("");

首先是处理拿到的数据

定义几个空数组存储处理后的值

let provinceData: any[] = [];

let level2data:any[]=[];

let level3data:any[]=[];

let level4data:any[]=[];

let level5data:any[]=[];

const DealData = () => {

if(sqlist.length!==0){

//第一层

Object.keys(sqlist).map((key) => {

// console.log("key",sqlist[key].orgName);

provinceData.push(sqlist[key]);

//childs存在

if(sqlist[key].childs.length!==0){

//第二层

Object.keys(sqlist[key].childs).map((key2)=>{

//如果当前的parentId=上一级的orgID

if(sqlist[key].orgId==sqlist[key].childs[key2].parentId){

level2data.push(sqlist[key].childs[key2])

}

//childs存在

if(sqlist[key].childs[key2].childs.length!==0){

//第三层

Object.keys(sqlist[key].childs[key2].childs).map((key3:any)=>{

if(sqlist[key].childs[key2].childs[key3].parentId=sqlist[key].childs[key2].orgId){

level3data.push(sqlist[key].childs[key2].childs[key3]);

// console.log("province",level3data);

}

//childs存在

if(sqlist[key].childs[key2].childs[key3].childs.length!==0){

//第四层

Object.keys(sqlist[key].childs[key2].childs[key3].childs).map((key4)=>{

if(sqlist[key].childs[key2].childs[key3].childs[key4].parentId==sqlist[key].childs[key2].childs[key3].orgId){

level4data.push(sqlist[key].childs[key2].childs[key3].childs[key4])

}

//childs存在

if(sqlist[key].childs[key2].childs[key3].childs[key4].childs.length!==0){

//第五层

Object.keys(sqlist[key].childs[key2].childs[key3].childs[key4].childs).map((key5)=>{

if(sqlist[key].childs[key2].childs[key3].childs[key4].childs[key5].parentId==sqlist[key].childs[key2].childs[key3].childs[key4].orgId){

level5data.push(sqlist[key].childs[key2].childs[key3].childs[key4].childs[key5])

}

})

}

})

}

})

}

})

}

});

}

};

DealData();

处理数据这里完全可以简化的现在是写复杂了具体怎么处理可以看你拿到的数据结构是什么样的来处理

接下来就是组件部分代码

{

provinceData?.map((item:any,index:any)=>{

return (

<AtAccordion

open={ provinceData[idx1]==item?true:false}

onClick={(v)=>{

console.log("v====",v);

setSelSqContent(provinceData[index].orgName)

if(v==true){

setidx1(index)

}else{

setidx1(-1)

}

}}

title={item.orgName}

key={index}

customStyle={{fontWeight:"bold"}}

{

level2data?.map((item2:any,index2:any)=>{

if(item2.parentId==item.orgId){

return (

<AtAccordion

open={level2data[idx2]==item2?true:false}

onClick={(v)=>{

setSelSqContent(level2data[index2].orgName)

if(v==true){

setidx2(index2)

}else{

setidx2(-1)

}

}}

title={item2.orgName}

key={index2}

customStyle={{fontWeight:"normal",width:"95%",marginLeft:"5%"}}

{

level3data?.map((item3:any,index3:any)=>{

if(item2.orgId==item3.parentId){

return (

<AtAccordion

open={level3data[idx3]==item3?true:false}

onClick={(v)=>{

setSelSqContent(level3data[index3].orgName)

if(v==true){

setidx3(index3)

}else{

setidx3(-1)

}

}}

title={item3.orgName}

key={index3}

customStyle={{fontWeight:"normal",width:"90%",marginLeft:"10%"}}

{

level4data?.map((item4:any,index4:any)=>{

if(item4.parentId==item3.orgId){

return (

<AtAccordion

open={level4data[idx4]==item4?true:false}

onClick={(v)=>{

setSelSqContent(level4data[index4].orgName)

if(v==true){

setidx4(index4)

}else{

setidx4(-1)

}

}}

title={item4.orgName}

key={index4}

customStyle={{fontWeight:"normal",width:"85%",marginLeft:"15%"}}

{

level5data?.map((item5:any,index5:any)=>{

if(item5.parentId==item4.orgId){

return (

<AtAccordion

open={level5data[idx5]==item5?true:false}

onClick={(v)=>{

setSelSqContent(level5data[index5].orgName)

if(v==true){

setidx5(index5)

}else{

setidx5(-1)

}

}}

title={item5.orgName}

key={index5}

customStyle={{fontWeight:"normal",width:"85%",marginLeft:"15%"}}

</AtAccordion>

)

}

})

}

</AtAccordion>

)

}

})

}

</AtAccordion>

)

}

})

}

</AtAccordion>

)

}

})

}

</AtAccordion>

)

})

}

基本上到这里就实现了手风琴的多级联动了，最后上一张效果图

代码证不足的地方，欢迎大佬们指点指点，多多改正。