这三个点在做什么？

Question

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

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

Answer 1

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

>

 var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
 var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
 var games = [...shooterGames, ...racingGames];

 console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']

解构数组

   var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
   var [first, ...remaining] = shooterGames;
   console.log(first); //Call of Duty
   console.log(remaining); //['Far Cry', 'Resident Evil']

结合两个物体

 var myCrush = {
   firstname: 'Selena',
   middlename: 'Marie'
 };

 var lastname = 'my last name';

 var myWife = {
   ...myCrush,
   lastname
 }

 console.log(myWife); // {firstname: 'Selena',
                      //   middlename: 'Marie',
                      //   lastname: 'my last name'}

三个点还有另一种用途，称为剩余参数，它可以将函数的所有参数作为一个数组。

函数参数作为数组

  function fun1(...params) {

  }

Answer 2

被称为扩展属性，正如其名称所示，它允许对表达式进行扩展。

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

这是财产分摊符号。它是在ES2018中添加的（阵列/iterables的扩展更早，ES2015），但它通过transpilation在React项目中得到了很长时间的支持（作为“JSX扩展属性”，尽管您也可以在其他地方进行，而不仅仅是属性）。

{…this.props}将props中的“自己的”可枚举属性作为您正在创建的Modal元素上的离散属性展开。例如，如果。道具包含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中的“自己”属性，传播将包含它。因此，如果出现此内容的组件有子元素，它们将被传递给Modal。将子元素放在开始标记和结束标记之间只是语法糖

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>