如何使用litElement获得另一个组件的组件状态更改? [英] How can I get component state change in another component with litElement?

问题描述

我基于

根组件是 my-app

  import''lit-element'中的{LitElement，html，customElement，query};导入'./my-form';导入'./my-view';从"./my-view"导入{MyView}；@customElement('my-app')导出类MyApp扩展了LitElement {@query('my-view')private myView ?: MyView;私人handleCountChange(e:CustomEvent< {count:number}>){如果(！this.myView)抛出'my-view not found！';this.myView.count = e.detail.count;}使成为() {返回html`< my-form @countChanged = $ {this.handleCountChange}></my-form>< my-view></my-view>`;}} 

如您所见，我们有两个组成部分:我的表单

  import {'lit-element'中的{LitElement，html，customElement，property};@customElement('my-form')导出类MyForm扩展了LitElement {@property({type:Number})count:any = 0;私人updateCount(e:KeyboardEvent){this.count =(< HTMLInputElement> e.target).value;this.dispatchEvent(新的CustomEvent('countChanged'，{组成:真实，气泡:是的，可取消:是的，详细信息:{count:this.count}}));}使成为() {返回html`<输入值= $ {this.count} @input = $ {this.updateCount} type ="text"/>`;}} 

和我的看法:

  import''lit-element'中的{LitElement，html，customElement，property};@customElement('my-view')导出类MyView扩展了LitElement {@property({type:Number})count:number = 0;使成为() {返回html`< p> $ {this.count}</p>`;}} 

要获取属性 count 从 my-form 更改为 my-view ，我调度了事件侦听器，然后在 my处使用了它-app ，然后在 handleCountChange 处，将 count 值分配给 MyView ，该值作为类导入，此外还导入为一个对手.

当前，这可行，但是我觉得这还有很长的路要走，特别是当我有更多的嵌套组件时.我想知道这样做是否更好.是否有类似于 Context API 的东西，它存在于 react.js 我曾考虑过使用 redux ，但有人不建议使用litElemnt.我正在考虑的想法之一是将事件调度到 document 而不是当前组件，但这可能是一个不好的做法！您有什么建议，请告诉我?

解决方案

您可能已经解决了此问题，但是我可以向您发送如何处理此问题.

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

在 my-app 组件中，您可以将 handleCountChange 更改为类似的内容(以防万一，如果您将 count 定义为属性，让 my-app 从属性接收初始值):

 私有handleCountChange(e:CustomEvent< {count:number}>){this.setAttribute('count'，count);//如果将`count`设置为观察属性，则无需调用`requestUpdate`方法} 

或类似的方式，如果您将 count 定义为类属性

 私有handleCountChange(e:CustomEvent< {count:number}>){this.count =计数；this.requestUpdate();//强制调用render方法，在这种情况下这是必需的} 

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

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

I started a project based on LitElement There are many components nested in each other, Let us say we have this structure:

the root component is 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>
    `;
  }
}

as you see we have two components: 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" />
    `;
  }
}

and my-view:

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>
    `;
  }
}

To get the property count changes from my-form into my-view I dispatched event listener then used it at my-app then at handleCountChange I'm assigning the count value to MyView which imported as a class in addition to import it as a componet.

Currently, this works, but I feel it is a long way especially when I have more nested components. I would like to know if there is a better for doing that. Is there something similar to Context API which exists at react.js I thought about using redux but somebody didn't recommend it with litElemnt. One of the ideas I'm thinking is to dispatch the event to document instead of the current component, but maybe this is a bad practice! What are your suggestions, please let me know?

解决方案

you have probably resolve this issue, but I can send you how I would deal with this.

You need to lift your state up to your my-app component. This state will be a single source of truth and deliver count value to my-form and my-view child components.

In my-app component, you can change handleCountChange to something like this (in case, if you define count as an attribute and let my-app to receive initial value from attributes):

 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
 }

or like this, if you define count as class property

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

Note that, you will have to send count value also to the my-form component. It will work also without it, but if you will do it, you will lost single source of truth of your state and that can cause potencional unexpected behaviour.

If you will need to send an example, please let me know.

这篇关于如何使用litElement获得另一个组件的组件状态更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！