How should the unfold operator that React.js assigns values to component properties be understood?

create a component and render it to the page:

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") )

my question is,
. Stands for the expansion operator, here I understand. Data is equivalent to assigning data to deconstruction, right? ,
if it is a deconstruction assignment,

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

, why is it wrong to write like this?

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

it must be written in this way to be correct. It"s confusing here. I don"t know this.". What exactly did the symbol do,

React.js typescript html5 python javascript

Mar.18,2021

because this is not the standard js syntax.

so since it is not standard, React wants {.data} to map to (including but not limited to) the following two modes:

{key1: val1, key2: val2,.}
key1= {data.val1} key2= {data.val2}.

Either way, it has the final say. After all, this place is < Person >. < / Person > this JSX territory.

so for JSX , it is clear that the second is in line with its syntax.

convert JSX to make it easy to understand

const data = {
  name: '',
  age: 12
}

<Person name={data.name} age={data.age}></Person>

const element = {
  elementName: 'Person',
  props: {
    name: data.name,
    age: data.age
  }
};

{.data} is equivalent to

<Person {...data}></Person>

const element = {
  elementName: 'Person',
  props: {
    ...data
  }
};

this is es6's rest syntax. For example, write

like this.

{
    "type": "JSXSpreadAttribute",
    "argument": {
         "type": "Identifier",
         "name": "a"
    }
}

babel processes this AST, to generate the following js code

React.createElement(View, a);

Previous: Does the enter display not show when hexo writes markdown?

Next: Webpack on the Packaging of react components