If a component has a number of properties, of course, you can do so as follows.
const Profile;
let name = 'viking', age = 10, gender = 'Male';
let component = <Profile name={name} age={age) gender={gender} />;
However, when a particularly large number of such properties when writing and formatting looks can become very complex, so JSX has a very handy feature - diffusion properties.
const Profile;
let props = {
name: 'viking',
age: 10,
gender: 'Male'
};
//用这种方式可以很方便地完成上一个例子里面的操作
let component = <Profile {...props) />;
You can use this method many times, and other attributes can also be grouped together. It should be noted that the order is important, the longer it will cover the property in front of the property.
let component = <Profile {...props} name='viking2' />;
console.log (component.props.name) ;
//viking2