react 自动设置高度

最新推荐文章于 2024-09-13 22:02:13 发布

在路上等

最新推荐文章于 2024-09-13 22:02:13 发布

阅读量599

点赞数 9

分类专栏： react 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_42327537/article/details/135005505

版权

react 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

export default function Height() {
    const [showDom,setShowDom]=useState([])
    const heightRef = useRef(null)
    let arrData =[
        {
               "index": 1,//占的U位
               "model_id": "assert",//model_id
               "ci_id": 1,//设备id 
               "ci_name": "设备1"//设备名称
             },
             {
               "index": 2,
               "model_id": "assert",
               "ci_id": 1,//设备占的U位多id相同
               "ci_name": ""//设备占的U位多不写名称
             },
             {
               "index": 3,
               "model_id": "assert",
               "ci_id": 1,
               "ci_name": ""
             },
             {
               "index": 4,
               "model_id": "assert",
               "ci_id": 2,
               "ci_name": "设备2"
             },
             {
               "index": 5,
               "model_id": "assert",
               "ci_id": 2,
               "ci_name": ""
             },
             {
               "index": 6,
               "model_id": "assert",
               "ci_id": 2,
               "ci_name": ""
             },
             {
               "index": 7,//没有占用 序号要有
               "model_id": "",
               "ci_id": "",//没有U位id为空
               "ci_name": ""
             }
   ]
   const changeData=(arrData)=>{
    let newArr = []
    arrData.forEach(item => {
        const parent = newArr.find(c => c.ci_id=== item.ci_id)
        if (parent) {
            parent.dataInfo.push(item)
        } else {
            const obj = {
                index: item.index,
                model_id:item.model_id,
                ci_id: item.ci_id,
                ci_name:item.ci_name,
                dataInfo:[item]
            }
            newArr.push(obj)
        }
    })
    newArr.map(obj => {  
      obj.height = obj.dataInfo.length*20+"px";  
      return obj;  
    });  
    return newArr
   }
    useEffect(()=>{
       let arrObj= changeData(arrData);
      
      //  console.log(heightRef.style)
      console.log(arrObj)
       setShowDom(arrObj)
    
    },[])
  return (
    <div>
        {
            showDom.map(item=>{
                return <div key={item.index} className="box1" style={{ height:item.height }} ref={heightRef}>{item.ci_name}</div>
            })
        }
    </div>
  )
}