时间戳

首页 > 解决方案 > LitElement 等效于 React “key” 概念

lit-element - LitElement 等效于 React “key” 概念

问题描述

<example name="One"></example>
<example name="Two"></example>
<example name="Three"></example>

下一个渲染看起来像这样：

<example name="Four"></example>
<example name="Three"></example>

LitElement 将删除最后一个元素并使用新属性更新前两个元素。

如何更改此设置，以便 LitElement 删除除第一个位置之外的所有元素name="three"，并在第一个位置创建一个新元素name="Four"？

使用 React，这将通过给它们一个关键属性来实现。我想使用 LitElement 实现相同的结果。

<example key="1" name="One"></example>
<example key="2" name="Two"></example>
<example key="3" name="Three"></example>

标签： lit-elementlit-html

解决方案

为此，您要使用 lit-htmlrepeat指令。从文档：

repeat 指令根据用户提供的键执行有效的列表更新：

repeat(items, keyFunction, itemTemplate)

在哪里：

  • items是一个数组或可迭代的。
  • keyFunction是一个将单个项目作为参数并返回该项目的保证唯一键的函数。
  • itemTemplate是一个模板函数，它将项目及其当前索引作为参数，并返回一个TemplateResult.

例如：

const employeeList = (employees) => html`
  <ul>
    ${repeat(employees, (employee) => employee.id, (employee, index) => html`
      <li>${index}: ${employee.familyName}, ${employee.givenName}</li>
    `)}
  </ul>
`;

如果对employees数组重新排序，该repeat指令会重新排序现有的 DOM 节点。

要使用repeat，您需要从 lit-html 导入它：

import {repeat} from 'lit-html/directives/repeat';

推荐阅读