JavaScript 中函数参数中对象的部分解构

Question

有没有办法只解构函数参数中的一些对象属性，而其余的在对象中仍然可以访问？

考虑以下反应示例。（我以 React 为例，但这个问题一般适用于 JS）

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

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

传入的 props 在函数参数中被解构，但是，还有其他道具进来，我可能想在某些情况下访问但我不想或不能解构 - 例如我做不知道它们是什么，想记录它们。

有没有办法不解构参数部分中的其他道具并将它们作为 props 对象访问？

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

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

但是不知道有没有其他的解决办法

Answer 1

你可以这样做

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}

JavaScript 中函数参数中对象的部分解构

Partial destructuring of object in function arguments in JavaScript

javascript

destructuring

reactjs