react技术全家桶(13)批量传递props

本文介绍了在React中如何批量传递props,特别是在props数量较多时的解决方案。通过使用展开运算符 {...},可以将对象的属性直接映射到组件的props上。同时,文章还探讨了展开运算符在数组和对象中的应用,并澄清了在React中使用展开运算符传递props并不等同于克隆对象的概念。
摘要由CSDN通过智能技术生成

1.字段少了可以如下写:
ReactDOM.render(,document.getElementById(“test”));
如果字段字段多了怎么整?
2.数据是后端请求获取的,模拟一下:
const person = {name:“老刘”,age:18,sex:“女”}
ReactDOM.render(,document.getElementById(“test”));
那么需要用对象点属性的写法,字段一旦多 很麻烦
所以解决方案如下:
const person = {name:“老刘”,age:18,sex:“女”}
ReactDOM.render(<Person {…person}/>,document.getElementById(“test”));
搞定 有个前提:person中的属性跟 render方法返回的属性要能对上,否则不行。

比如如下就不行:
在这里插入图片描述
复习展开运算符:
let a=[1,3,5,7,9]
let a1=[2,4,6,8,10]
console.log(…a) //结果 1 3 5 7 9 展开一个数组
let a3 = […a,…a1]
console.log(a3)//结果 [1,3,5,7,9,2,4,6,8,10] 拼接两个数组

function sum(…numers){// …表示同类型的数组
return numbers.redce((preValue,currentValue)=>{
return preVa

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值