在变量声明中反应花括号 [英] React curly brace in variable declaration

问题描述

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

I recently followed a react tutorial to create a template project and have since been modifying code to fit my needs. In particular, there was this piece of code on a component that was passed a parameter called label.

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

在此示例中，我从控制器返回了JSON对象，并使用名为 rune 的参数将其传递给此组件. rune JSON的一个属性是名称"，我想将名称分配给一个名为`label的变量.使我麻烦的一件事是:

In this example, I returned a JSON object from a controller and passed it to this component using a parameter named rune. A property of the rune JSON is "name", and I wanted to assign the name to a variable called `label. One thing that gave me trouble was the following:

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

第一个 console.log(...)正确输出名称.但是，第二个日志是未定义的.经过一番尝试和错误之后，我发现如果从 const 声明中删除花括号，则名称将正确解析.

The first console.log(...) outputs the name correctly. However, the second log was undefined. After some trial and error, I found that if I removed the curly braces from my const declaration the name resolved properly.

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

大括号最初在做什么?本教程最初有它们的原因吗?

What were the curly braces originally doing? Is there a reason the tutorial initially had them?

推荐答案

您在此处提出的要求实际上与React不相关，它与Javascript有关:

What you ask here is not related to React actually, it is related to Javascript: Destructuring assignment.

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

For objects, you can destruct a property like that:

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

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

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

以上，两个分配均相等.第一个是第二个的简写.

Above, both assignments are equal. First one is the shorthand of the second one.

以您的示例为例:

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

在这里，有一个 this.props.rune.name.label 属性，您正在从 this.props.rune.name 对其进行销毁.等于:

Here, there is a this.props.rune.name.label property and you are destructing it from this.props.rune.name. This is equal to:

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

实际上不是

const label = this.props.rune.name;

您尝试过.

React与这种语法相关的部分是我们在React世界中经常看到它.喜欢:

The related part of React with this syntax is we see it very frequently in React world. Like:

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 安全.

A caution. When dealing with nested properties to destruct being careful is important. Since as @Tyler Sebastian explained in the comments it is not null safe.

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

可以，但是如果那里有错字或尝试使用当时不存在的属性，则会收到 error ，因为我们尝试从破坏属性>未定义一个.

This is OK but if we have a typo there or if we try to use a property which does not exist at that time we get an error since we try to destruct a property from an undefined one.

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

这将引发错误.感谢@Tyler Sebastian的评论.

This throws an error. Thanks to @Tyler Sebastian for the comment.

这篇关于在变量声明中反应花括号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！