2

我开始了一个基于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而不是当前组件，但也许这是一个不好的做法！你有什么建议，请告诉我？

4

1 回答 1

2

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

您需要将您的状态提升到您的my-app组件。这种状态将成为单一的事实来源，并为子组件提供count价值。my-formmy-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。没有它它也可以工作，但如果你这样做，你将失去你的状态的单一真实来源，这可能导致潜在的意外行为。

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

于 2019-07-15T16:01:11.040 回答