react vue 背景挂载机器

问题：项目当中我们有的时候会遇到多个背景图片在一个地方展示的问题

当时项目比较急没有时间做工具函数，被团队优化以后有，时间进行工具函数编写

 技术： 插槽 ， 和 css 背景 这个还不是最终的状态 背景定位还有两个属性

子组件

// positioning:{left:{direction:"center"},right:{direction:"cneter"}
const BackgroundMounter = (props)=> {
       const BackgroundMounter = props.backGround
       let backGroundPost = ""
       let backGroundMessage = ""
       let backGroundSises = ""
      
       if(BackgroundMounter && BackgroundMounter.length > 0){
              BackgroundMounter.forEach((item,index) => {
                 if(index +1 !== BackgroundMounter.length  ){
                     backGroundMessage += `url(${item.URL})` + "no-repeat "  + ","
                     backGroundSises += item?.style?.width + " " + item.style.height + ","
                     backGroundPost +=  item.style.positioning.left.direction + " " +  item.style.positioning.right.direction + ","
                 }else {
                     backGroundMessage += `url(${item.URL})` + "no-repeat " 
                     backGroundSises += item?.style?.width + " " + item.style.height 
                     backGroundPost +=  item.style.positioning.left.direction + " " +  item.style.positioning.right.direction 
                 }
              });
       }  
      
       return(

              {props.children}
            
       
)
}
export default BackgroundMounter

父组件

backGround 

/* eslint-disable no-unused-expressions */
import React ,{ useEffect} from "react"
import {useState} from "react"
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import logincss  from './index.module.css'
import  Store from "../../Redux/redux";
import { BrowserRouter, Route, Routes,Link,Outlet,useNavigate} from "react-router-dom"
import UseClass from "./className";
import BackgroundMounter from "./BackgroundMounter";
const Log =  () => {
    const  usenavigate =  useNavigate()
    const backGround = [
      {URL:"https://pic2.zhimg.com/v2-abee0fc1e685e6ecad60cd507a9cf6b5_b.jpg",style:{width:"100px",height:"100px",positioning:{left:{direction:"center"},right:{direction:"center"}}}
      },
      {URL:"https://pic2.zhimg.com/v2-abee0fc1e685e6ecad60cd507a9cf6b5_b.jpg",style:{width:"100px",height:"100px",positioning:{left:{direction:"center"},right:{direction:"bottom"}}}}

]

     //  userstate 功能进行数据的绑定舰艇 两个参数 第一个为数据第二个为函数形式的变化只有通过函数进行改动才能更新页面的数据
     let    [[form],setform] =  useState(Form.useForm())   
     const linitform =  {
         password:'123456',
         username:'wangchangzhou'
     }
     const login = () => {
      console.log("deng录")
      // eslint-disable-next-line react-hooks/rules-of-hooks
      usenavigate('/home',{state:{login:true}}) 
      Store.dispatch({type:'login',login:true})
     }
     const valueSet = ()=> {
      const time = null
      if(time){
               clearTimeout(()=> {
                
               })
      }
       
       setTimeout(()=> {
         console.log("KKKKKKK")
       })
     }
     const getValue = ()=> {
          
     }
     useEffect(()=> {
      //  console.log(useClass(logincss.login_bution,logincss.login_bution_BACK),"返回值")
     },[])
        const fundom = (value)=> {
         if(value ==="取消") {
          form.resetFields()
         }else {
          login()
          //   console.log(form.getFieldsValue());
          //  let value = form.getFieldsValue()
          //   console.log(linitform === value)
          //   // eslint-disable-next-line no-unused-expressions
          //      if(linitform.password == form.getFieldsValue().password && linitform.password == form.getFieldsValue().password ){
          //       login()
          //      }
            
         }
       }
       return(
       <>   
            {/* 背景挂载机 */}
            
               
测试
            
          
          {/* 1
          2jn   kkkkkkkkk */}
       )
//        return(
//         

//                 

//       

//           低代码测试
//       
//         } placeholder="请输入用户名" />
//       
//       
//         }
//           type="password"
//           placeholder="请输入密码"
//         />
//       
//       {/* 
//         
//           Remember me
//          */}
// {/* 
//         
//            记住密码
//         
//        */}

//       
//         { return fundom('登陆') }} type="primary" htmlType="submit" className="login-form-button">
//           登录
//         
//         { return fundom('取消') }} style={{marginLeft: '20px'}} type="primary" htmlType="submit" className="login-form-button">
//           取消
//         
//       
//       
//     
//     
//         
//        )
}
export default Log