react taro 多级手风琴 taro踩坑

最近在用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>

             )

           })

         }

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

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