Question

所以我看到人们使用不同的方法来声明一个函数。但是，我看到了一种我不太了解的方式。示例代码如下所示：

type Props = { 
    name: string,
    age: number
}

const someFunction = ({
    name,
    age
}: Props) => {
   return (
    // Do something here
   )
}

所以我知道这里的代码是首先创建一个具有名称和年龄的Props对象。我没有得到的部分是显示({name, age}: Props)的部分。我猜这是一个将状态映射到道具的参数，但是我不确定。谁能解释一下？

Answer 1

它称为Destructuring Assignment。这是ES6语法。

它存在于arrays和objects中。

基本上，这是提取数组/对象的一部分的一种方法。

执行{ name, age } = props时，您是从通常称为name的对象中提取 age和props。

使用解构：

const someFunction = ({
    name,
    age
}: Props) => {
  console.log(name, age)
}

不破坏结构：

const someFunction = (props: Props) => {
  const name = props.name
  const age = props.age

  console.log(name, age)  
}

使用ReactJS声明功能组件时

1 个答案: