LitElement 渲染其他具有属性的元素集合

Question

我为组件库创建了一个基于 React 的 POC，现在我想尝试制作一个类似的基于 LitElement 的 POC。在 React 中，你可以像这样定义一个组件：

export interface MyProps {
  prop1: string;
  prop2: number;
  ...
}

export interface MyState {
}

export class MyComponent extends React.ReactComponent<MyProps, MyState> {
  ...
}

在另一个组件的 'render' 方法中，如果我有一个要用 'MyComponent' 表示的实体集合，可以这样做：

export class MyOtherComponent extends React.ReactComponent {
  render(): React.ReactNode {
    return (
      <MyComponent prop1={ this.state.prop1 } prop2={ this.state.prop2 } />
    );
  }
}

使用 LitElement，我可以类似地定义 MyComponent：

@customElement('my-component')
export class MyComponent extends LitElement {
  @property()
  prop1: string | undefined;

  @property()
  prop2: number | undefined;

  ...
}

这里的第一个区别是我似乎需要将我的属性定义为“|未定义”，因为这些是在创建元素后设置的。有必要吗？

但我真正的问题归结为如何实施 'MyOtherComponent':

@customElement('my-other-component')
export class MyComponent extends LitElement {
  ...
  render(): TemplateResult {
    return html`
      ${this._dataList.map((value) => html`<my-component prop1=${value.prop1} prop2=${value.prop2}/>`)}
    `;
  }
  ...
}

我无法像在 React 中那样设置内联 'prop1' 和 'prop2'，因为它们不是属性，而是属性。使用 LitElement 实现此目的的最佳方法是什么？

提前致谢！

史蒂夫

Answer 1

如@Steve 所述，我的评论有答案。我是根据@Jeremey 的推荐把它放在这里的：

在属性个名字上加上句点 (.)：<my-component .prop1=${value.prop1} .prop2=${value.prop2}></my-component>

参见：https://lit-html.polymer-project.org/guide/writing-templates#bind-to-properties（顺便说一句，自定义元素需要结束标记。）

LitElement 渲染其他具有属性的元素集合

LitElement rendering collection of other elements with properties

components

lit-element