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

因为这里并不是标准的 js 语法啊。

那么既然不标准，React 想让 {...data} 映射到（包括但可以不限于）下面两种模式:

• {key1: val1, key2: val2, ...}

• key1={data.val1} key2={data.val2} ...

哪一种都是它说了算，毕竟这个地方是 <Person ...>...</Person> 这个JSX 的地盘。

那么对于 JSX 来说，显然第二种才是符合它的语法的。