react中对象扩展运算符使用问题

看别人代码看到

render() {
    return <Modal {...this.props}> {this.props.children} </Modal>
}

对其中的{...this.props}产生了疑惑。我们知道在JSX中遇到{}就以js来解析，所以遇到{...this.props}左边的 { 时，开始以js来解析。但我们在这里按照ES7的对象扩展运算符语法，无法解析

成对象，因为需要再多一个{}包住...this.props才行，否则会报错，更别提这里把父组件属性传给子组件使用了，根本就不符合ES7语法，那么是怎么运作的呢。

答案如下，这里不仅仅和ES7有关系还涉及到JSX语法了，

这个是JSX在实现中做的事情，一个传递的shortcut，它能够识别spread syntax到props中去

一个你就把它当作是jsx的语法来使用；一个如果你想知道为什么，读实现去

https://segmentfault.com/q/1010000005028077