您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

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

{...this.props} 将 “自己的”可枚举属性props作为离散属性散布在Modal要创建的元素上。例如,如果this.props包含a: 1b: 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”:

javascript 2022/1/1 18:24:13 有424人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶