如何理解react中组件属性传入{...xxxx}

发布时间：2020-12-15 07:19:53 所属栏目：百科来源：网络整理

导读：const User = () = { return ( div className="content-inner" UserFilter {...userFilterProps} / UserList {...userListProps} / UserModalGen / /div ) } 在React的设定中，初始化完props后，props是不可变的。为了解决这个问题，React引入了属性延伸, v

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'} />;
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!