代码之家 › 专栏 › 技术社区 › Zuhair Taha

如何使用litelement在另一个组件中获取组件状态更改?

lit-html lit-element state-management custom-component typescript

Zuhair Taha · 技术社区 · 5 年前

我开始了一个基于 LitElement 有许多组件相互嵌套,假设我们有这样的结构:

根组件是 my-app

import { LitElement, html, customElement, query } from 'lit-element';
import './my-form';
import './my-view';
import { MyView } from './my-view';

@customElement('my-app')
export class MyApp extends LitElement {
  @query('my-view') private myView?: MyView;

  private handleCountChange(e: CustomEvent<{ count: number }>) {
    if (!this.myView) throw 'my-view not found!';
    this.myView.count = e.detail.count;
  }

  render() {
    return html`
      <my-form @countChanged=${this.handleCountChange}></my-form>
      <my-view></my-view>
    `;
  }
}

如你所见,我们有两个组成部分:我的表格

import { LitElement, html, customElement, property } from 'lit-element';

@customElement('my-form')
export class MyForm extends LitElement {
  @property({ type: Number }) count: any = 0;

  private updateCount(e: KeyboardEvent) {
    this.count = (<HTMLInputElement>e.target).value;
    this.dispatchEvent(
      new CustomEvent('countChanged', {
        composed: true,
        bubbles: true,
        cancelable: true,
        detail: { count: this.count }
      })
    );
  }

  render() {
    return html`
      <input value=${this.count} @input=${this.updateCount} type="text" />
    `;
  }
}

我的观点是:

import { LitElement, html, customElement, property } from 'lit-element';

@customElement('my-view')
export class MyView extends LitElement {
  @property({ type: Number }) count: number = 0;

  render() {
    return html`
      <p>${this.count}</p>
    `;
  }
}

得到财产 count 更改自 my-form 进入之内 my-view 我发送了事件侦听器,然后在 我的应用程序 然后在 handleCountChange 我在分配 计数 价值 MyView 除了作为componet导入外,还作为类导入。

目前,这是可行的,但我觉得这是一个很长的路,特别是当我有更多的嵌套组件。我想知道这样做是否有更好的办法。有类似的东西吗 Context API 存在于 react.js 我想用 redux 但有人不建议用litelemnt。我在想的一个办法是把活动 document 而不是目前的组成部分,但也许这是一个坏的做法!你有什么建议,请告诉我?

0 回复 | 直到 5 年前

Radovan Kuka 5 年前

你可能已经解决了这个问题,但我可以告诉你我将如何处理这个问题。

你需要把你的状态提升到 my-app 组件。这个国家将是唯一的真理之源 count 价值 my-form 和 my-view 子组件。

在 我的应用程序 组件,您可以更改 handleCountChange 这样的事情(如果你定义 计数 作为一种属性 我的应用程序 要从属性接收初始值,请执行以下操作:

 private handleCountChange(e: CustomEvent<{ count: number }>) {
   this.setAttribute('count', count); // If you set `count` as observed attribute, you will not need to call `requestUpdate` method
 }

或者像这样,如果你定义 计数 作为类属性

 private handleCountChange(e: CustomEvent<{ count: number }>) {
   this.count = count;
   this.requestUpdate(); // force to call render method which is necessary in this case
 }

注意,你必须发送 计数 也对 我的表格 组件。它也会在没有它的情况下工作,但如果你这样做,你将失去你的状态的唯一真相来源,而这可能会导致潜在的意想不到的行为。

如果您需要发送一个例子,请让我知道。