0

我正在学习 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);

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

4

3 回答 3

0

在聚合物中，您无法按照定义的方式定义变量，因此请移动 ie。进入构造函数：

演示

  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那样，函数将返回空字符串。""为了影响风格，您需要设置disable true.

于 2019-01-24T09:05:32.973 回答
0

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

这个功能是在 Chrome 72 ( https://www.chromestatus.com/feature/6001727933251584 ) 中提供的，所以如果你不使用 babel，你可以在那里毫无问题地使用它。

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

于 2019-02-28T11:30:08.297 回答
0

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

即移动

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

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

出类声明。然后，您可以直接按名称调用它，而无需this.

于 2019-02-14T11:54:06.280 回答