React：你如何分配对象道具的默认属性？

Question

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

Answer 1

看起来你正在使用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 }

Answer 2

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

最简单的方法是拥有两个道具：positionX＆amp;位置▲

然后在您的子组件中，您可以设置两者的默认道具，因此如果传入一个而不是另一个，则可以回退到另一个的默认值。

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

另一种选择是检查它是否存在于子组件中的任何位置，并使用具有Y和X值的新对象在该点处对其进行操作。

对象解构的例子：

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

如果您预计x可能未定义，因为您可以传入x，那么您也可以给x一个默认值。如果this.props.position上存在x或y，则它将覆盖默认值