Reactjs中{…this.props}的含义是什么

Question

的意义是什么

{...this.props}

我正在尝试那样使用它

 <div {...this.props}> Content Here </div>

Answer 1

它被称为传播属性，其目的是使道具的传递更加容易。

让我们假设您有一个接受N个属性的组件。如果数量增加，将这些信息传递下去可能是乏味且笨拙的。

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

因此，您可以这样做，将它们包装在一个对象中并使用扩展符号

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

它将把它解压缩到组件上的props中，即，仅当将props传递给另一个组件时，才“永远” {... props}在render()函数内部使用。照常使用打开包装的道具this.props.x。