Javascript 反应：如何分配对象道具的默认属性？

例如，子组件被传递

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

操作，则无法依靠默认道具工作，因为默认道具不会检查对象上缺少的特定属性，但会检查道具是否存在

最简单的方法是使用两个道具：位置X和位置Y

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

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

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

对象分解的示例：

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

---

如果您预期在传递y时x可能未定义，那么您也可以给x一个默认值。如果x或y存在于

this.props.position

上，那么它将覆盖默认值

这就是我试图避免的。你可以通过对象解构来执行：var{x，y=50}=this.props.position这将使y具有默认值50，并且x将等于this.props.position中的任何值。如果y确实存在，那么它将使用vs，默认值将起作用，但是否有办法实际更改this.props的值，而不是为结构化变量创建默认值？改变this.props将是一种反模式，有没有什么特别的原因使得父组件不能以这样的方式处理它，每次都用x和y传递位置，然后子组件就不必担心它了？只是为了让开发人员体验不那么乏味。例如，如果我想设置位置x和y，我需要传递我的位置x和位置y作为道具，而不是传递位置={{x:123，y:123}针对React:和另一个问题来看一下这个问题：是否需要在每次渲染之前运行这些代码行，因为子组件无法修改它自己的道具？是的，如果我了解您的要求，您只需要将带有默认值的新值分配给一个局部变量，然后在渲染时可以使用该局部变量。Object.assign不会改变道具。