这就是 属性展开符号 。它是在 ES2018 中添加的（数组/可迭代对象的展开更早，ES2015），但它在 React 项目中通过转译长期得到支持（作为“ 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 中的“自身”属性，因此 spread 将包含它。因此，如果出现 this 的组件有子元素，它们将被传递给 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;
}

... 被称为 扩展属性 ，顾名思义，它允许扩展表达式。

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

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

三个点代表 ES6 中的 扩展运算符 。它允许我们在 JavaScript 中做很多事情：

1. 连接数组

    var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
   var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
   var games = [...shooterGames, ...racingGames];
   
   console.log(games) // ['使命召唤', '孤岛惊魂', '生化危机', '极品飞车', 'Gran Turismo', 'Burnout']
   

2. 解构数组

    var shooterGames = ['使命召唤', '孤岛惊魂', '生化危机'];
   var [first, ...remaining] = shooterGames;
   console.log(first); //使命召唤
   console.log(remaining); //['孤岛惊魂', '生化危机']
   

3. 合并两个对象

    var myCrush = {
   firstname: 'Selena',
   middlename: 'Marie'
   };
   
   var lastname = '我的姓氏';
   
   var myWife = {
   ...myCrush,
   lastname
   }
   
   console.log(myWife); // {firstname: 'Selena',
   // middlename: 'Marie',
   // lastname: '我的姓氏'}
   

这三个点还有另一种用途，称为 剩余参数 ，它使将所有参数作为一个数组传递给函数成为可能。

4. 函数参数作为数组

    function fun1(...params) {
   
   }