变量声明中的反作用大括号[重复]

Question

最近，我按照react教程创建了一个模板项目，并一直在修改代码以满足我的需要。特别是，组件上的这段代码被传递了一个名为label的参数。

render() {
  const { label } = this.props;
  ...
}

在本例中，我从控制器返回了一个JSON对象，并使用名为rune的参数将其传递给该组件。runeJSON的一个属性是“name”，我想把这个名称分配给一个名为`label'的变量。给我带来麻烦的一件事是：

render() {
  console.log("Prop.runes.name: " + this.props.rune.name);
  const { label } = this.props.rune.name;
  console.log("Label: " + label);
  ...
}

第一个console.log（…）正确输出名称。但是，第二个日志未定义。经过一些尝试和错误之后，我发现如果我从const声明中删除大括号，名称将正确解析。

render() {
  const label = this.props.rune.name;
  ...
}

花括号最初是做什么的？教程最初有它们有什么原因吗？

Answer 1

let {x} = {a: 10, b: 20, c: 30, d: 40}
console.log(x) // undefined

let {b} = {a: 10, b: 20, c: 30, d: 40}
console.log(b) // 10

console.log(c) // Error: c is not defined

本质上，const{tag}=this.props；是未定义的，因为对象this.props没有标签属性，因此它无法匹配它，根据我的x示例，但是在b示例中，它确实匹配一个属性，因此它被正确分配。

Answer 2

请尝试使用此代码

render() {
  console.log("Prop.runes.name: " + this.props.rune.name);
  const label = this.props.rune.name.label;
  console.log("Label: " + label);
  ...
}

您需要声明不带{}的变量标签

大括号用于分解结构

你可以在这里查一下

深度分解

Answer 3

您在这里所问的问题实际上与React无关，而是与Javascript:disstructuringassignment有关。

对于对象，可以像这样破坏属性：

const obj = {
  name: "foo",
};

const { name } = obj;
console.log( name );

const name2 = obj.name;
console.log( name2 );