JavaScript

时间:2019-10-23 09:45:07

标签: javascript reactjs destructuring

有没有一种方法可以仅对函数参数中的某些对象属性进行解构,而其余的属性仍可以在对象中访问?

考虑以下反应示例。 (我以React为例,但这个问题通常适用于JS)

const Form = (formProps) => {
  return (
    ...
    <FormSectionComponent
       initialValues={...} 
       values={...}
       {...formProps}
    />
    ...
  )
}

const FormSectionComponent = ({ initialValues, values}) => {
...
}

传入的props在函数参数中被解构,但是,还有其他一些支持,我可能想在某些情况下访问它们,而我不想或不能解构-例如,我不知道它们是什么,并希望记录它们。

有没有办法不破坏参数部分中的其他道具并将其作为props对象进行访问?

我能想到的唯一解决方法是:

const FormSectionComponent = (props) => {
  const { initialValues, values} = props;
}

但是我想知道是否还有其他解决方案。

1 个答案:

答案 0 :(得分:3)

您可以做类似的事情

const FormSectionComponent = ({ initialValues, values, ...props}) => {
...
}

实际上将props绑定到传递给函数的参数的其余属性。

const f = ({a, b, ...rest}) => rest
console.log(f({a: 1, b: 2, c: 3, d: 4})) // { c: 3, d: 4}