关于{...props} 问题

来源：4-9 【高阶组件HOC】withAddToCart()

qq_慕哥3569984

2021-07-27

老师，我想问您一下下图的{…props} 为什么换成 props 就会出错呢？图片描述

写回答

1回答

阿莱克斯刘

2021-07-31

已采纳

JavaScript中三个点叫做“展开操作符”，他的作用就是简化传递数据的操作。

我们可以想象一下，如果你有一个组件需要输入 N 个 properties。如果properties的数量不断增加，那么我们的传递数据的代码将会非常难看。

<Component x={} y={} z={} />

所以，为了避免组件属性传递出现冗长，React的语法糖允许我们使用展开操作符来添加对象参数

var props = { x: 1, y: 1, z:1 };
<Component {...props} />

以上的代码在react中有一个专有名词叫做unpack，拆包，react会自动帮你映射并且适配相对应的对象。在组件中, 我们通常 this.props.x 来使用拆包后的props

阿莱克斯刘

qq_慕哥3569984

是的，你的理解是正确的

2021-09-15

共3条回复

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

1993 学习 · 1015 问题

相似问题

回答 1

回答 1

回答 1

回答 1

回答 3