关于{...props} 问题

Question

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

Answer 1

阿莱克斯刘 2021-07-31 06:49:08

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 #1

  非常感谢！

• 提问者 qq_慕哥3569984 #2

  抱歉！老师，过了这么多天又来问这个问题，对于 <Component {...props} />  我当时是想着props本身是一个对象，这里通过展开运算符把props对象的属性展开，而后又在外层放了一个{},我以为展开的属性又被聚拢变成一个对象，相当于做了一个无用功。但我今天回过来一想，...外的{}其实仅仅表达的是jsx语法用来包裹住js的表达式，而非{}包裹属性变成一个对象。 老师你认为我现在的这个想法是对的吗？

• 阿莱克斯刘 回复 提问者 qq_慕哥3569984 #3

  是的，你的理解是正确的