在变量声明中反应花括号

小编典典

在变量声明中反应花括号

reactjs

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

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

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

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

阅读 430

2020-07-22

共1个答案

小编典典

您在这里提出的要求实际上与React没有关系，它与Javascript：Destructuring分配有关。

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

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的评论。

2020-07-22