使用剩余属性解构组件 props

Question

据我理解，这个{...props}和{prop1, prop2, prop3}是一样的。

在声明一个无状态功能组件时，使用解构很方便，这样你就不必不断地输入props.prop1，props.prop2等等。然而，当你需要传递给子组件10+个props时，事情会变得非常丑陋，因此我认为我可以使用展开运算符来解构我的props对象！

基于{...props}本质上与{prop1, prop2, prop3}相同的想法，我期望下面的代码能够工作，但是我收到了一个prop1未定义的错误。

const Component = ({...props}) => {
    return (
        <div>
            {prop1}
        </div>
    )
}

我想做的事情可能吗？我在网上找不到任何例子，但如果有一种方法可以在不明确列出每个prop的情况下解构props对象，那将是很棒的！

编辑：请理解我知道如何正确地访问props对象中的属性。仔细阅读我的问题，我试图展开props对象中的所有属性，类似于显式声明它们的示例：

const Component = ({prop1, prop2, prop3}) => {
    return (
        <div>
            {prop1}
        </div>
    )
}

我希望您能像我使用{...props}初始化组件一样使用它。

- Robbie Milejczak

---

props is actually an object, so you'd need to access it as such : props.prop1 - Mark C.

"据我理解，{...props}和{prop1, prop2, prop3}是相同的东西" - 嗯，不是。如果你想要拆解成单独的变量，你需要明确地这样做。请写出你实际想表达的意思。 - Bergi

首先，不存在“展开运算符”。其次，在这里你没有展开任何东西。在此上下文中，{...props} 的意思是将传递的对象的所有剩余（“rest”）属性收集并分配到新对象中的props变量中。因此，({...props}) => {} 基本上与 props => {} 相同，所以你没有获得任何东西。如果你将 {prop1, ...props} 写成这样，它就会有所不同。这将从传递的对象中提取prop1并将其赋值给变量prop1， 然后将 prop2 和 prop3 分配到一个新对象中并赋值给 props 变量。 - Felix Kling

请参阅 https://dev59.com/pFoU5IYBdhLWcg3wvIuq 和 https://dev59.com/4VcP5IYBdhLWcg3wDWRq。在这种情况下，`...props`表示一个**rest属性**。 - Felix Kling

为了完整起见，你基本上想要使用with语句，就像在Destructuring an object without specifying its properties中所解释的那样，但是with语句已经被弃用，在严格模式下不起作用，而ES6模块是严格模式。 - Felix Kling

Answer 1

{...props}和{prop1, prop2, prop3}是相同的东西。

只有当你的函数参数通过键值解构对象的属性时，才会是真实的。

我的意思是：

const doAThing = ({ prop1, prop2, prop3 }) => { console.log(prop1) }

然后像这样调用它 doAThing({...props})（其中prop1是props对象上的属性） - 在这种情况下，你是正确的。这就是它的工作原理。

你无法像尝试的那样访问prop1的原因是因为你没有给解构赋值任何要分配的东西。它只是作为具有prop1，prop2，prop3等键/值对的对象存在。

- Mark C.

---

请查看Vivek对我的问题的回答，并注意我特别指的是React中的函数组件，而不是普通的ES6函数。如果我明确声明一个名为props的对象，并将其作为prop传递并使用({...props})初始化组件，则行为符合预期。但是，如果我尝试在React创建的props对象上执行此操作，则无法正常工作。这就是我感到困惑的地方。 - Robbie Milejczak

所以你的问题是关于从React.Component基类派生的组件，而不是关于对象解构赋值功能的？ - Mark C.

是的，我的理解是当我定义一个组件时，所有传递的属性都被收集到一个props对象中，并且可以引用为props.prop1等。因此，我很困惑为什么不能展开该对象而不是显式地解构它。 - Robbie Milejczak

展开运算符(...props)是将属性传递到函数执行的方式，并允许这些属性被解构（拆包）为函数参数。另一方面，你必须明确地将属性传递给函数doAThing(props.prop1, props.prop2)等。 - Mark C.

@RobbieMilejczak：不，...在不同的上下文中有不同的含义。这就是为什么我说没有单一的“扩展运算符”。我在另一个评论中链接的问题中详细说明了这一点。我们可以区分以下几种情况：扩展元素（[1, ...arr]），剩余元素（var [foo, ...bar] = arr;和([foo, ...bar]) => {}），扩展参数（foo(...args)），剩余参数（(...args) => {}）。这些都是ES6的一部分。对象剩余/扩展提案添加了剩余属性（var {foo, ...bar} = obj和({foo, ...bar}) => {}）和扩展属性（{foo: 42, ...obj}）。 - Felix Kling