Question

据我了解，此{...props}与{prop1, prop2, prop3}

相同

当声明无状态功能组件时，使用解构很方便，因此您不必经常键入props.prop1, props.prop2等。但是，如果您有10多个道具，则需要传递给您子组件的东西会变得非常难看，所以我认为我可以使用spread运算符来构造我的道具对象！

根据{...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}
相同

如果您的函数参数通过 key 值解构对象的属性，则仅。

我的意思是：

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

然后将其称为doAThing({...props})（其中prop1是props对象上的属性） - 在这种情况下，您是正确的。这就是它的工作方式。

您无法访问“{1}}”的原因是因为您尚未将 prop1 分配给任何内容。它只是作为具有deconstruction assigment等的键/值对的对象坐在那里。

用其他属性解构道具

1 个答案: