私は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);
どんな考えでも大歓迎です。ありがとうございました。