react中的解构赋值例子

const User = () => {  
    return (  
    <div className="content-inner">  
      <UserFilter {...userFilterProps} />   
      <UserList {...userListProps} />   
      <UserModalGen />  
    </div>  
     )  
} 

在React的设定中，初始化完props后，props是不可变的。

为了解决这个问题，React引入了属性延伸,

var props = { foo: x, bar: y };
var component = <Component { ...props } />;

以上代码和下面代码完全相同

var component = <Component foo={x} bar={y} />

当需要拓展我们的属性的时候，定义个一个属性对象，并通过{…props}的方式引入，在JSX中，可以使用...运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个...运算符的实现类似于ES6 Array中的...运算符的特性。，React会帮我们拷贝到组件的props属性中。重要的是—这个过程是由React操控的，不是手动添赋值的属性。

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;