LitElement эквивалент понятия «ключ» React

Question

<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>

Answer 1

Для этого вы хотите использовать директиву lit- html 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';