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

这个React（使用JSX）代码做什么？它叫什么？

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

Answer 1

这些是JSX传播属性 ：

传播属性

如果你已经有道具作为对象，并且你想用JSX传递它，你可以使用...作为“传播”操作符来传递整个道具对象。 这两个组件是等价的：

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

当您构build通用容器时，扩展属性可能很有用。 但是，他们也可以通过使很多不相关的道具传递给不关心它们的组件来简化代码。 我们build议您谨慎使用这个语法。

这个文档曾经提到，尽pipe（现在）这是一个JSX的东西，但有一个build议是向JavaScript本身添加Object Rest和Spread Properties 。 （自ES2015以来，JavaScript已经得到了rest和扩展，但是不包括对象属性。）截至2017年4月，该提案已进入阶段3，因此尚未进入即将发布的ES2017规范。 几个月后，它会不会很快就会推出ES2018; 人们希望如此。 （更多关于阶段在这里 。）运输支持一段时间（甚至与JSX分开）。

---

附注：尽pipe上面的JSX报价谈到了一个“扩散算子”， ...不是算子，也不是。 运营商有一个单一的结果值。 ...是主要的语法（类似于() for ()使用fortypes不是分组操作符，即使它们看起来像这样）。

Answer 2

正如你所知道的...被称为Spread Attributes （名称代表它）允许扩展expression式。

 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} /> 

所以简而言之，这是一个简洁的捷径， 我们可以说 。

Answer 3

JavaScript中的三个点是传播/rest操作符 。

传播运营商

扩展语法允许在需要多个参数的地方展开expression式。

 myFunction(...iterableObj); [...iterableObj, 4, 5, 6] [...Array(10)] 

rest参数

其余参数语法用于具有可变数量参数的函数。

 function(a, b, ...theArgs) { // ... } 

ES6中引入了数组的传播/rest操作符。 有一个国家2对象传播/rest属性的build议。

TypeScript还支持扩展语法，并可将其转换为较旧版本的ECMAScript，但存在一些小问题 。

Answer 4

这也是在React中使用的es6的一个特性。 看下面的例子：

 function Sum(x,y,z) { return x + y + z; } console.log(Sum(1,2,3)); //6 

如果我们有最多3个参数，这种方式是好的，但如果我们需要添加例如110个参数。 我们是否应该将它们全部定义并逐一添加？ 当然有一个更简单的方法来做，这就是所谓的SPREAD。 而不是传递所有你写的参数：

 function (...numbers){} 

我们不知道有多less个参数，但是我们知道有那么多参数。 基于es6，我们可以重写上面的函数，并使用它们之间的传播和映射，使它像一块蛋糕一样简单：

 var Sum = (...numbers) => { return numbers.reduce((prev, current) => prev + current ); } console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45 

Answer 5

对于那些来自Python世界的人来说，JSX Spread Attributes相当于Unpacking Argument Lists （Python **符）。

我知道这是一个JSX的问题，但使用类比有时有助于加快速度。

Answer 6

这只是在JSX中以不同的方式定义道具！

它使用ES6中的数组和对象操作符（对象还没有完全支持），所以基本上如果你已经定义了你的道具，你可以通过这种方式传递给你的元素。

所以在你的情况下，代码应该是这样的：

 function yourA() { const props = {name='Alireza', age='35'}; <Modal {...person} title='Modal heading' animation={false} /> } 

所以你定义的道具现在是分开的，必要时可以重新使用。

这等于：

 function yourA() { <Modal name='Alireza' age='35' title='Modal heading' animation={false} /> } 

这些是来自React团队关于JSX中的传播运算符的引用：

JSX Spread属性如果您事先知道要放置在组件上的所有属性，则可以很容易地使用JSX：

 var component = <Component foo={x} bar={y} />; 

突变道具不好
如果您不知道要设置哪些属性，则可能稍后尝试将其添加到对象上：

 var component = <Component />; component.props.foo = x; // bad component.props.bar = y; // also bad 

这是反模式，因为这意味着我们不能帮助您检查正确的propTypes，直到以后。 这意味着你的propTypes错误最终会有一个神秘的堆栈跟踪。

道具应该被认为是不可改变的。 在其他地方将道具物体变形可能会导致意想不到的后果，所以理想的情况是在这一点上它是一个冻结的物体。

传播属性
现在，您可以使用JSX的一个名为spread属性的新function：

 var props = {}; props.foo = x; props.bar = y; var component = <Component {...props} />; 

您传入的对象的属性被复制到组件的道具上。

您可以多次使用它或将其与其他属性组合。 规格顺序很重要。 后来的属性覆盖以前的属性

 var props = { foo: 'default' }; var component = <Component {...props} foo={'override'} />; console.log(component.props.foo); // 'override' 

什么是怪异的符号？
ES6中的数组已经支持…运算符（或扩展运算符）。 对象rest和传播属性也有一个ECMAScript提议。 我们正在利用这些支持和开发的标准，以便在JSX中提供更清晰的语法。

Answer 7

这三个点(...)被称为spread运算符，这在概念上类似于ES6arrays扩展运算符，JSX利用了这些支持和开发的标准，以便在JSX中提供更清晰的语法

对象初始值设定项中的Spread属性将自己的可枚举属性从提供的对象复制到新创build的对象上。

 let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 } 

参考：

1） https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2） https://facebook.github.io/react/docs/jsx-spread.html

Answer 8

以简单的方式传递多个属性

{… this.props}拥有this.props的属性

使用{…}传播运营商与以下道具

 this.props = { firstName: 'Dan', lastName: 'Abramov', city: 'New York', country: 'USA' } 

没有{…}传播

 <Child firstName={this.props.firstName} lastName={this.props.lastName} city={this.props.city} country={this.props.country} > 

用{…}传播

 <Child { ...this.props } /> 

Dan Abramov's推文关于Spread operator（Redux的创build者） https://twitter.com/dan_abramov/status/694519379191545856?lang=zh

Answer 9

这是ES6 / Harmony的新function。 它被称为传播运算符。 它可以让你分开一个数组/对象的组成部分，或者把多个项目/参数粘在一起。 这里是一个例子：

 let array = [1,2,3] let array2 = [...array] // array2 is now filled with the items from array 

并用一个对象/键：

 // lets pass an object as props to a react component let myParameters = {myKey: 5, myOtherKey: 7} let component = <MyComponent {...myParameters}/> // this is equal to <MyComponent myKey=5 myOtherKey=7 /> 

真正好的是你可以用它来表示“剩下的价值”。

 const myFunc = (value1, value2, ...values) { // Some code } myFunc(1, 2, 3, 4, 5) // when myFunc is called, the rest of the variables are placed into the "values" array 

Answer 10

这些被称为价差。 正如名字所暗示的那样。 这意味着它将这些数组或者对象中的任何值赋予它。

如 ：

 let a = [1, 2, 3]; let b = [...a, 4, 5, 6]; console.log(b); > [1, 2, 3, 4, 5, 6]