JavaScript React中的这三个点是做什么的？

JavaScript React中的这三个点是做什么的？

那是 property spread notation。它是在ES2018中添加的（用于数组/可迭代对象的版本更早于ES2015），但是随着时间的流逝，它通过转译得到了支持（作为“ JSX spread attributes ”，即使你也可以在其他地方这样做，而不仅仅是属性） 。

{...this.props}

将 “自己的”可枚举属性

props

作为离散属性散布在

Modal

要创建的元素上。例如，如果

this.props

包含

a: 1

和

b: 2

，则

<Modal {...this.props} title='Modal heading' animation={false}>

将与

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

但是它是动态的，因此包括了所有“自有”属性

props

。

由于

children

是中的“拥有”属性

props

，因此传播将包括它。因此，如果出现此内容的组件具有子元素，则将它们传递给

Modal

。在开始标签和结束标签之间放置子元素只是将children属性放入开始标签的语法糖（一种好方法）。例：

扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象非常方便-在更新状态时会遇到很多问题，因为你无法修改状态直：

this.setState(prevState => {    return {foo: {...prevState.foo, a: "updated"}};});

它将替换为this.state.foo具有与该属性相同的所有属性的新对象，foo该a属性变为”updated”：