如何使用 litElement 在另一个组件中更改组件状态？答案

【问题标题】：How can I get component state change in another component with litElement?如何使用 litElement 在另一个组件中更改组件状态？
【发布时间】：2019-11-05 05:21:48
【问题描述】：

我基于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>
    `;
  }
}

如你所见，我们有两个组件：my-form

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，我调度了事件侦听器，然后在my-app 使用它，然后在handleCountChange 我将count 值分配给MyView 导入除了将其作为组件导入之外，还可以作为一个类。

目前，这是可行的，但我觉得还有很长的路要走，尤其是当我有更多嵌套组件时。我想知道这样做是否有更好的方法。是否有类似于Context API 的东西存在于react.js 我考虑过使用redux，但有人不推荐使用 litElemnt。我正在考虑的一个想法是将事件发送到document 而不是当前组件，但也许这是一个不好的做法！您有什么建议，请告诉我？

【问题讨论】：

"有人不推荐它与 litElemnt" 您应该使用对您有意义的工具。 Redux 似乎是一种合理的方法。 PWA Starter Kit 使用 LitElement 构建并使用 Redux。

标签： typescript custom-component state-management lit-element lit-html

【解决方案1】：

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

您需要将您的状态提升到您的my-app 组件。此状态将成为单一事实来源，并将 count 值传递给 my-form 和 my-view 子组件。

在my-app 组件中，您可以将handleCountChange 更改为类似的内容（如果您将count 定义为属性并让my-app 从属性中接收初始值）：

 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
 }

或者像这样，如果你将count定义为类属性

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

请注意，您还必须将 count 值发送到 my-form 组件。没有它它也可以工作，但如果你这样做，你将失去你的状态的单一真实来源，这可能导致潜在的意外行为。

如果您需要发送示例，请告诉我。

【讨论】：