0

私はPolymer/lit-elementを学んでいて、本当に簡単なデモプロジェクトを構築しようとしています. クラス内でes6アロー関数(getButtonStyle関数)を使用しようとしていますが、このエラーが返されます

SyntaxError: この実験的な構文では、パーサー プラグインを有効にする必要があります: 'classProperties'

lit-element プロジェクトで矢印機能を使用するには? 私は何が欠けていますか?ありがとう!

いくつかのbabel拡張パッケージをインストールして.babelrcにプラグインをセットアップしようとしましたが、うまくいきませんでした(確かに、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