如何在Polymer / lit-element项目中使用箭头功能

Question

我正在学习Polymer / lit-element并尝试构建一个非常简单的演示项目。我正在尝试在类中使用es6箭头函数（getButtonStyle函数），但它返回给我这个错误

SyntaxError：这个实验语法需要启用解析器插件：'classProperties'

如何在lit-element项目中使用箭头功能？我错过了什么？谢谢！

我已经尝试在.babelrc中安装一些babel扩展包和设置插件，但它不起作用（当然，因为它不使用babel）。也试过谷歌，但没有看到任何人有同样的问题。

import { html, LitElement } from "lit-element";

class ButtonDemo extends LitElement {
  constructor() {
    super();
    this.text = "Button";
    this.disabled = false;
    this.ready = false;
  }

  static get properties() {
    return {
      disabled: {
        type: Boolean
      },
      ready: {
        type: Boolean
      }
    };
  }

  getButtonStyle = (disabled, ready) => {
    if (!disabled) return "";

    var styles = "disabled ";
    styles += ready ? "saving" : "incomplete";
    return styles;
  };

  render() {
    return html`
      <style>
        button {
          //some style
        }
        button.disabled.saving {
          //some style
        }
        button.disabled.incomplete {
          //some style
        }
      </style>
      <button
        class="${this.getButtonStyle(this.disabled, this.ready)}"
        ?disabled="${this.disabled}"
      >
        My Button
      </button>
    `;
  }
}

window.customElements.define("button-demo", ButtonDemo);

任何想法将不胜感激。谢谢。

Answer 1

在聚合物处，您无法定义您定义的变量，因此移动即。到构造函数：

Demo

  static get properties() {
    return {
      disabled: {
        type: Boolean
      },
      ready: {
        type: Boolean
      },
      getButtonStyle: {
        type: Object
      }

    };
  }

constructor() {
    super();
    this.text = "Button";
    this.disabled = false;
    this.ready = false;
    this.getButtonStyle = (disabled, ready) => {
           if (!disabled) return "";

           var styles = "disabled ";
           styles += ready ? "saving" : "incomplete";
           return styles;
    };
  }

为了测试，当你定义disabled=false时，函数将返回空String。 “”为了影响风格，你需要设置disable true。

Answer 2

您可以将箭头函数声明移动到模块范围。

即移动

getButtonStyle = (disabled, ready) => {
    if (!disabled) return "";

    var styles = "disabled ";
    styles += ready ? "saving" : "incomplete";
    return styles;
  };

在课堂宣言之外。然后，您可以直接通过名称调用它，而无需this。

Answer 3

这与lit-element完全无关。所有浏览器尚不支持此语法，这就是您收到babel警告的原因。

此功能是在Chrome 72（https://www.chromestatus.com/feature/6001727933251584）中提供的，因此如果您不使用babel，您可以毫无问题地使用它。

如果您确实使用了babel，则需要安装警告中提到的语法插件。应该有很多巴贝尔指南帮助你。