react学习小记之如何进行双向绑定(mobile.ant.design中的Collapse折叠面板的使用)

小何同学要加油

已于 2023-02-09 17:02:38 修改

阅读量857

点赞数 1

文章标签： react.js 学习前端

于 2023-02-07 13:26:12 首次发布

本文链接：https://blog.csdn.net/Anony_me/article/details/128915589

版权

mobile.ant.design在react中使用，组件Collapse折叠面板的使用，并且有手风琴效果的。
要求：折叠面板默认展开第一项，把从接口获取到的菜单，展示到折叠面板上。主要是使用react中的useState函数实现，双向绑定（取到数值，进行渲染展示）。

home.js

import { useState} from 'react';//引入useState
//useState 通过在函数组件里调用它来给组件添加一些内部 state。React 会在重复渲染时保留这个 state。useState会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数
import {  Collapse } from 'antd-mobile'
import * as React from 'react';
import { getMenusTreeByPlat } from '../service/index'
export default function Home(props) {
    const [menusList, setMenusList] = useState([])//调用 useState 函数 并导入状态的初始值[]
             const getMenus = () => {
        getMenusTreeByPlat().then((res) => {
           
            if (res.code === 2000000) {
                let arr=[]
                res.data.forEach(element => {
                    if (element.menusCategory == 0) { 
                        // 筛选数据是菜单类的
                     arr.push(element)
                    }
                });
                setMenusList(arr)//把arr得到的值放入到menusList中
             
            }
        })
    }
     return (
        <div className='collapse'>
                   <Collapse accordion defaultActiveKey={'1'} >
                             //页面上再重新渲染menusList的值
                             {menusList.map((item, i) => {
                                 return (
                                     <Collapse.Panel title='第二项'  key={i}>
                                         手风琴模式只能同时展开一个
                      
                                     </Collapse.Panel>
                                 )
                             })}
                         </Collapse>  
                         </div>
                         )
    }

home.scss

样式是项目需要而修改的

  .collapse{
    .adm-collapse {
            .adm-list {
                --border-inner: 0 !important;
                .adm-list-body{background-color:#F0F1F6;
                        border-radius: 0.2564rem !important;
                .adm-list-body-inner{
                    .adm-plain-anchor{
                        margin-bottom:0.3546rem  !important;
                        border-radius: .2564rem !important;
                          
                            line-height: 1.1538rem;
                                height: 1.641rem;
                                font-weight: 600;
                                font-size: .4615rem;
                             
                    }

           .adm-collapse-panel-content{
             margin-top:-0.496rem !important;
            margin-bottom: 0.3546rem !important;
            border-bottom-left-radius: .2564rem !important;
                border-bottom-right-radius: .2564rem !important;
            }
                    }
                }

            }
 
}
  }