0

我有超级简单的发光元素，我试图有一个基于 isOpen 反应属性的关闭或打开图标。单击元素集this.isOpen = !this.isOpen，这应该会导致更新。不幸的是，单击该按钮不会导致重新渲染。任何想法为什么会发生这种情况？垃圾点击时正确Console.log注销。true false true false tue

编辑：将 isOpen 更改为字符串open和closed. 没有效果。
edit2：将 isOpen 更改为@state(). 没有效果。
编辑3：添加this.requestUpdate()并且有效。但这没有任何意义！re-render如果更改它们不会导致甚至触发，那么关于“反应性”属性的“反应性”是什么lifecycle methods？？？？？？

@customElement('header-top')
export class HeaderTop extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
    :host([hidden]) {
      display: none;
    }
    .settings-btn {
      display: inline-block;
      width: 2rem;
      height: 2rem;
      fill: white;
      cursor: pointer;
      padding: 0;
      margin: 0;
      border: none;
      background: none;
    }
    .settings-btn:hover {
    }
  `;

  @property({ type: Boolean })
  isOpen = false;

  public render() {
    console.log(no-rerender).
    return html`<header>
      <nav>
        ${this.isOpen
          ? html`<button
              class="settings-btn close"
              @click="${this._openOrCloseMenu}"
            >
              <i>${close}</i>
            </button>`
          : html`<button
              class="settings-btn open"
              @click="${this._openOrCloseMenu}"
            >
              <i>${equalizer}</i>
            </button>`}
      </nav>
    </header>`;
  }

  public _openOrCloseMenu(e: Event) {
    console.log(this.isOpen); // triggers
    this.isOpen = !this.isOpen;
  }
}
4

1 回答 1

0

显然，反应性属性只有在它是 DOM 元素 API 的一部分时才是反应性的。您可以通过设置 ({attribute: false}) 将其关闭，它将重新渲染。

于 2022-01-13T21:15:16.490 回答