Question

我正在学习反应，我正在关注quick start guide，在主题Lifting State Up中我找到了计算器组件

class Calculator extends React.Component {
    constructor(props) {
      super(props);

      ...

      this.state = {scale: 'c', temperature: ''}
    }

    handleCelsiusChange(temperature) {
      this.setState({scale: 'c', temperature})
    }

    handleFahrenheitChange(temperature) {
      this.setState({scale: 'f', temperature});
    }

    render() {
      ...

      return (
        <div>
          ...
        </div>
      )
    }
  }

我的问题是关于这句this.setState({scale: 'c', temperature})，我期待this.setState({scale: 'c', temperature: temperature})。

这个temperature分配是否会对辛糖产生反应？你能解释一下为什么会这样吗。

由于

Answer 1

{scale: 'f', temperature}基本上是Property value shorthand的{{1}}语法，

因此，在使用{scale: 'f', temperature: temperature}的JavaScript中，如果要定义一个对象，其键的名称与作为属性传入的变量的名称相同，则可以使用简写并简单地传递键名称

查看 doc 了解详情

使用此语法时需要注意的一件重要事情是，JS引擎在包含范围内查找具有相同名称的变量。

如果找到，则将该变量的值分配给该属性。

如果找不到，则抛出ES6/ES2015。值得注意的是，如果找不到变量，ReferenceError将不会在编译时抛出错误，而是声明一个具有not-found变量名称的对象。

但是，当代码运行时，您仍然会获得transpilers，因为该变量不存在。

Answer 2

这是一些javascript语法糖。

这是一个很常见的情况，可以按照以下方式执行：

const obj = {
    a: a,
    b: b,
    c: c
};

您正在使用已有的变量构建对象并保持其名称相同。但是你会注意到你必须两次写每个变量名。所以相反，你可以写：

const obj = { a, b, c };

，它将与上述代码一样进行评估。

使用变量作为键和值创建对象

2 个答案: