那是 财产传播符号
。它是在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，因此传播将包括它。因此，如果出现此内容的组件具有子元素，则将它们传递给
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;}
