React中三个点(...)的用处

问题

React代码中(使用JSX语法),三个点(...)的作用,以及这种写法被称为什么? 链接

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

回答一

2018年4月更新

这是一种属性展开语法,ES2018中添加(提案, 目前处于草案规范阶段),但是这种语法在React中是通过代码转译长期支持的(即JSX展开属性,不仅属性展开可以那么用,其他地方也能用)。

{...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中可以包含任何的属性。

展开语法不仅适合于属性展开,还适用于用现有对象的大部分或全部属性来创建一个新的对象,但是在更新状态时会有问题,因为没法直接更改状态。

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

这将用一个所有与foo对象属性一致的新对象替代this.state.fooa除外,a的值是updated

原答案(2015年7月)

这被称为JSX展开属性

展开属性

如果属性都在props对象中,而且想传递给JSX,那么可以使用...作为一个"展开"的操作符来传递整个props。以下2个组件是等价的。

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

创建通用的容器时,展开属性是很有用的。然而,如果向组件传递了大量不相关的属性,这将使代码变得混乱。因为,推荐保守使用。

上述文档不仅是描述JSX展开语法,同时也是JavaScript本身的添加对象展开属性的一个提案(ES2015中,JavaScript就已经有了数组展开语法,但是没有对象展开的)。2017年11月,这个提案已经处于Stage3一段时间了。Chome的V8和Firefox的SpiderMonkey现在已经支持了,因此如果语言规范及时制定出来的话,这个提案将很快进入Stage4而且成为ES2018快照规范的一部分。(了解Stages)转译器已经支持这种语法一段时间了(与JSX是独立的)。


边注:虽然上述JSX的引文提到“展开操作符”, 但是...并不是一个操作符,也不能是。操作符应该有一个简单的结果。...是一个重要语法(类似于for循环中的()()也不是一个分组操作符,即使看起来像)。

回答二

...被称为展开属性,这个名字就表示它能展开表达式。

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

而且对于这种情况

//just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}
<Modal {...person} title='Modal heading' animation={false} />

等价于

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

简而言之,这是一种简洁写法。

geekcircle            updated 2018-05-21 23:36:33

results matching ""

    No results matching ""