如何使用默认值将无状态组件中的道具(反应)转换为变量,并在JSX中应用带有该变量的扩展运算符？

Question

下面的代码正确呈现

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

但是,我能做些什么来省略复制道具名称原语,高度等的需要吗？

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

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

}

Answer 1

你想要做的是聪明,但是对象解构不允许你在将属性放入另一个对象时去除属性.但是,您可以将props展开到您放置默认值的对象中,并返回该对象:

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接受第一个参数,并将后续参数的所有属性放在第一个参数上,从左到右覆盖冲突.然后它返回第一个参数.