reactjs - 在 React 中解构 props 的不同方式

Question

我见过两种在 React 中解构 props 的方法。

    function MyComponent({name,age,height}){
            // do stuff here
    }

或者

    function MyComponent(props){
            const {name,age,height} = props
            // do stuff here
    }

假设这个组件被用作
<MyComponent name="bob" age={25} height = {175} haspets={false}/>
这是我的问题:

如果我使用第一种解构方式，是否意味着我将无法访问其他专业人士，在这种情况下 haspets
这两种方式的优缺点是什么？

Answer 1

您可以稍后通过 the arguments object 访问对象的其他属性。 ，尽管正如链接上也指出的那样，应该首选其余参数。

<MyComponent name="bob" age={25} height = {175} surname="test" haspets={false} />

function MyComponent({ name, age, height, ...rest }){
      // rest will be an object like { surname: 'test', haspets: false }
}

我能想到的差异之一，我想是 最重要 , 是在第二种情况下，同时您正在破坏您的 props对象，您正在使用 const在声明。

这样，您就无法再更改 MyComponent 上的这些值。 ，而在您的第一种情况下，您可以轻松修改它们。