如何将具有默认值的无状态组件（反应）中的 props 解构为一个变量，并在 JSX 中对该变量应用扩展运算符？

Question

下面的代码正确呈现

export default ({
  primitive = "a-sky",
  height = "2048",
  radius= "30",
  width= "2048"
}) => {
const properties = { primitive, height, radius, width}
return <Entity {...properties} />
}

但是，我可以做些什么来省略复制道具名称的需要 primitive、height 等？

下面的代码不起作用，但显示了我的意思

let properties
export default ({
  primitive = "a-sky",
  height = "2048",
  radius= "30",
  width= "2048"
} = properties) => {
return <Entity {...properties} />

}

Answer 1

你传递给这个箭头函数的数据结构是什么？ javascript 中的对象需要 : 而不是 = 。如果您尝试声明默认值，例如以下表示法：

( x = 'default for x', y = 'default for y' ) => {
    console.log(x, y);
}

然后从箭头函数的参数部分中删除 { }。

将其恢复为您发布的内容：

我建议将您的箭头函数传递给一个名为 params 的对象，然后在该对象上使用扩展运算符。

((params) => <Entity {...params} />)({ a: "val", b: "val", c: "val"})

Answer 2

您的尝试很聪明，但是对象解构不允许您在将属性放入另一个对象时剥离它们。但是，您可以将 props 散布到您设置默认值的对象中，并且 return 该对象：

export default props => {
  const propsWithDefaults = {
    primitive: "a-sky",
    height: "2048",
    radius: "30",
    width: "2048",
    ...props
  };

  return <Entity {...propsWithDefaults} />
}

props 中的属性将覆盖您硬编码的属性。

编辑：另一种方式似乎更符合您的要求：

export default props => {
  const defaultProps = {
    primitive: "a-sky",
    height: "2048",
    radius: "30",
    width: "2048"
  };

  return <Entity {...Object.assign(defaultProps, props)} />
}

Object.assign 采用第一个参数，并将后续参数的所有属性放在第一个参数上，从左到右覆盖冲突。然后 return 是第一个参数。

如何将具有默认值的无状态组件（反应）中的 props 解构为一个变量，并在 JSX 中对该变量应用扩展运算符？

How to destructure props in stateless component (react) with default values into a variable and apply spread operator with that variable in JSX?

javascript

destructuring

reactjs

aframe