Question

我最近遵循了一个React教程来创建模板项目，此后一直在修改代码以满足我的需求。特别是，在组件上的这段代码传递了名为label的参数。

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

在此示例中，我从控制器返回了JSON对象，并使用名为rune的参数将其传递给此组件。 rune JSON的一个属性是“名称”，我想将名称分配给一个名为`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

尝试使用此代码

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

您需要声明不带{}

的变量标签

大括号用于解构

您可以在此处查看

depth destructuring

Answer 2

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 { label } = this.props;是未定义的，因为对象this.props不具有label属性，因此按照我的x示例，它无法匹配它，但是在b示例中，它确实匹配属性，因此分配正确。

在变量声明中反应花括号

2 个答案: