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

Question

创建一个组件然后渲染到页面上:
classpersonextendsReact.Component{
constructor(name,age)
{
this.name=name;
this.age=age;
}
render(){
return(
{this.props.name}--{this.props.age}
);
}
}
constdata={
name:'张三',
age:12
}
ReactDom.render(,document.getElementById('app'))
我的问题是,...代表展开运算符，在这里我的理解...data相当于把data给解构赋值了吧？，如果是解构赋值的话，
ReactDom.render(,document.getElementById('app'))
，这样写为什么会报错呢？
非要这样写才正确...这里很迷惑，不知道这个'...'符号到底做了什么，

Answer 1

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