那是 财产传播符号 。它是在 ES2018
中添加的（数组/迭代的传播更早，ES2015），但它在 React 项目中通过转译得到了很长时间的支持（作为“ JSX
传播属性”，即使你也可以在其他地方做，不仅仅是属性）。

{...this.props} __在您正在创建的元素上将 “自己的”可枚举属性props作为离散属性展开
。Modal例如，如果this.props包含a: 1and 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 将包含它。因此，如果它出现的组件有子元素，它们将被传递给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;

}