使用其余属性解构道具

Question

据我了解，这个{...props} 和{prop1, prop2, prop3} 是一回事

在声明无状态功能组件时，使用解构很方便，这样您就不必不断输入props.prop1, props.prop2 等。但是，当您有 10 多个道具时，您需要传递给您的子组件变得非常丑陋，所以我认为我可以使用扩展运算符来解构我的道具对象！

基于{...props} 与{prop1, prop2, prop3} 基本相同的想法，我希望下面的代码可以工作，但我得到了prop1 is undefined 错误

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

我正在尝试做的事情可能吗？我在网上找不到任何示例，但是如果有一种方法可以在不明确列出每个道具的情况下解构道具对象，那就太棒了！

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

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

我希望它的行为与使用 {...props} 初始化组件的行为相同

Answer 1

这个{...props}和{prop1, prop2, prop3}是一回事

这只有在你的函数参数通过键值解构对象的属性时才是正确的。

我的意思：

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

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

您无法像尝试那样访问prop1 的原因是因为您没有为deconstruction assigment 分配任何内容。它只是作为具有 prop1, prop2, prop3 等键/值对的对象坐在那里。