使用其余属性解构 props

Question

所以据我了解，这个 {...props} 和 {prop1, prop2, prop3}

是一样的

当声明一个无状态的功能组件时，使用解构很方便，这样你就不必不断地输入 props.prop1, props.prop2 等。但是，当你有 10+ 个 props 时，你需要传递给你的子组件的东西可能会变得非常难看，所以我想我可以只使用扩展运算符来解构我的 props 对象！

基于 {...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

this {...props} is the same things as {prop1, prop2, prop3}

如果您的函数参数通过 key value 解构对象的属性，这 只为真。

我的意思是：

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

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

您无法像您尝试那样访问 prop1 的原因是您没有给 deconstruction assigment 任何要分配给的东西.它只是作为对象坐在那里，带有 key/value 对 prop1, prop2, prop3 等..

destructuring props with the rest properties