在变量声明中反应大括号

Question

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

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

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

你在这里问的实际上与React无关，它与Javascript：Destructuring assignment.有关

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

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

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

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

以上，两项任务都是平等的。第一个是第二个的简写。

对于你的例子：

const { label } = this.props.rune.name;

在这里，有一个this.props.rune.name.label属性，你正在从this.props.rune.name破坏它。这相当于：

const label = this.props.rune.name.label;

并不是

const label = this.props.rune.name;

当你尝试。

使用这种语法的React的相关部分是我们在React世界中经常看到的。喜欢：

render() {
    const { foo, bar } = this.props;
    const { fizz, buzz } = this.state;
    return (
      <p>A {foo} goes to {bar} and orders a {fizz} without {buzz}</p>; 
    )   
}

要么

const AComponent = ( { foo, bar } ) => (
  <p>{foo} loves {bar} in programming world.</p>
);

谨慎。处理嵌套属性时要小心谨慎是很重要的。由于@Tyler Sebastian在评论中解释说它不是null安全。

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

这没关系，但是如果我们在那里有一个拼写错误，或者如果我们尝试使用当时不存在的属性，我们会得到一个error，因为我们试图从undefined中破坏一个属性。

const data = { obj: { name : "foo"} };
const { objx: { name } } = data;

这会引发错误。感谢@Tyler Sebastian的评论。

Answer 2

尝试使用此代码

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

您需要在没有{}的情况下声明变量标签

花括号用于解构

你可以在这里查看

depth destructuring

Answer 3

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示例中它确实匹配属性，因此它正确分配。