React:如何分配对象道具的默认属性

React: how do you assign default properties of object props?

本文关键字：对象 属性 默认 分配 何分配 React      更新时间：2023-09-26

例如，子组件通过position={{x: 50}}。如何在子组件内重新分配this.props.position以等于{{x: 50, y: 0}}

看起来你在使用React;如果你也在使用ES2016，你将能够使用Object.assign:

var initial = {x: 0, y: 0};
var passed = {x: 50};
var result = Object.assign({}, initial, passed);
console.log(result); // { x: 50, y: 0 }

如果你只是做了this.props.position，你就不能依靠默认的道具来工作，因为默认的道具不会检查对象上缺失的特定属性，而是会检查道具是否存在。

最简单的方法是使用两个道具:positionX &positionY

然后在你的子组件中，你可以设置这两个组件的默认道具，所以如果一个被传入而另一个没有，你可以回退到另一个的默认值。

getDefaultProps: function() {
  return {
    positionX: 50,
    positionY: 0
  };
},

另一种选择是检查它是否存在于子组件中使用它的位置，并在该点使用一个同时具有Y和X值的新对象来操作它。

对象解构的例子:

var {x, y=50} = this.props.position

如果你预期x在传递y时可能是未定义的，那么你也可以给x一个默认值。如果x或y在this.props.position上存在，那么它将覆盖默认值

相关文章：