The problem of using the object spread operator in react

see other people's code

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

Doubt about {...this.props} in it. We know that when we encounter {} in JSX, we use js to parse, so when we encounter the { on the left of {...this.props}, we start to parse with js. According to ES7's object expansion operator syntax, it cannot be parsed
into an object. , because one more {} is needed to wrap...this.props, otherwise an error will be reported, not to mention the use of parent component properties to child components, so how does it work?

This is what JSX does in the implementation, a passed shortcut that recognizes the spread syntax into props

One you use it as jsx syntax; one if you want to know why, read the implementation

https://segmentfault.com/q/1010000005028077