React.js 给组件属性赋值的展开运算符应该怎么理解?

Question

创建一个组件然后渲染到页面上:

class person extends React.Component{

    constructor(name,age)

    {

        this.name = name;

        this.age = age;

    }

    

   

    render(){

       return( <div>{this.props.name}--{this.props.age}</div>);

    }

}

const data = {

     name:'张三',

     age:12

}

ReactDom.render(<Person {...data}></Person>,document.getElementById('app') )

我的问题是,

...代表展开运算符，在这里我的理解 ...data 相当于把data给解构赋值了吧？，

如果是解构赋值的话，

ReactDom.render(<Person { "name":"张三","age":12 }></Person>,document.getElementById('app') )

，这样写为什么会报错呢？

<Movie name={user.name} age={user.age} gender={user.gender}></Movie>

非要这样写才正确... 这里很迷惑，不知道这个'...'符号到底做了什么，

Answer 1

因为这里并不是标准的&nbsp;js&nbsp;语法啊。那么既然不标准，React&nbsp;想让&nbsp;{...data}&nbsp;映射到（包括但可以不限于）下面两种模式:{key1: val1, key2: val2, ...}key1={data.val1} key2={data.val2} ...哪一种都是它说了算，毕竟这个地方是&nbsp;<Person ...>...</Person>&nbsp;这个JSX&nbsp;的地盘。那么对于&nbsp;JSX&nbsp;来说，显然第二种才是符合它的语法的。