...在此React（使用JSX）代码中做什么？它叫什么？
<Modal {...this.props} title='Modal heading' animation={false}>
#1楼
那是财产传播符号 。 它是在ES2018中添加的（用于数组/可迭代对象的版本更早于ES2015），但是随着时间的流逝，它已经通过转译得到了支持（即使您也可以在其他地方（不仅是属性）也可以通过“ JSX传播属性 ”来支持它） 。
{...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属性。 例：
class Example extends React.Component { render() { const { className, children } = this.props; return ( <div className={className}> {children} </div> ); } } ReactDOM.render( [ <Example className="first"> <span>Child in first</span> </Example>, <Example className="second" children={<span>Child in second</span>} /> ], document.getElementById("root") );.first { color: green; } .second { color: blue; }<div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>扩展符号不仅适用于该用例，而且对于创建具有现有对象的大多数（或全部）属性的新对象非常方便-在更新状态时会遇到很多问题，因为您无法修改状态直：
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
this.state.foo替换为一个新对象，该对象具有与foo相同的所有属性，但a属性变为"updated" ：
const obj = { foo: { a: 1, b: 2, c: 3 } }; console.log("original", obj.foo); // Creates a NEW object and assigns it to `obj.foo` obj.foo = {...obj.foo, a: "updated"}; console.log("updated", obj.foo);.as-console-wrapper { max-height: 100% !important; }#2楼
JavaScript中的三个点是传播/休息运算符 。
点差运算符
扩展语法允许在需要多个参数的地方扩展表达式。
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
休息参数
rest参数语法用于参数数目可变的函数。
function(a, b, ...theArgs) {
// ...
}
ES6中引入了数组的散布/余数运算符。 对于对象散布/静止属性，有一个状态2 建议 。
TypeScript还支持传播语法，并且可以将其转换为ECMAScript的较早版本，而出现一些小问题 。
#3楼
这三个点(...)被称为扩展运算符，这在概念上类似于ES6数组扩展运算符，JSX利用这些受支持的标准和正在开发的标准来在JSX中提供更简洁的语法
对象初始化程序中的传播属性将自己的可枚举属性从提供的对象复制到新创建的对象上。
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
#4楼
如您所知...被称为“ 扩展属性” ，其名称代表该名称，它可以扩展表达式。
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} />
简而言之， 可以说这是一个简洁的捷径。
#5楼
这是React中也使用的es6的功能。 看下面的例子：
function Sum(x,y,z) {
return x + y + z;
}
console.log(Sum(1,2,3)); //6
如果我们最多拥有3个参数，那么这种方法很好，但是如果我们需要添加例如110个参数，该怎么办。 我们是否应该全部定义它们并一一添加？ 当然，有一种更简单的方法称为SPREAD。 无需传递所有这些参数，而是编写：
function (...numbers){}
我们不知道我们有多少个参数，但是我们知道有很多参数。 基于es6，我们可以如下重写上述功能，并使用它们之间的传播和映射使它像一块蛋糕一样容易：
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45
