Keyed Fragments — это React Fragments, которые объявляются с использованием явного синтаксиса <React.Fragment> и включают проп key. Они позволяют React правильно идентифицировать и отслеживать элементы фрагмента внутри списков или массивов.
Главное применение keyed fragments — это маппирование коллекций в массивы фрагментов. Когда ты рендеришь списки групп из нескольких элементов, keyed fragments помогают React сохранить правильную идентификацию элементов и их состояние.
function Glossary(props) {
return (
<dl>
{props.items.map(item => (
<React.Fragment key={item.id}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</React.Fragment>
))}
</dl>
);
}
key — это единственный атрибут, который можно сейчас передать во Fragment. Это отличается от обычных HTML-элементов, которые принимают множество пропов и атрибутов.
React может расширить возможности Fragment в будущих версиях, добавив поддержку дополнительных атрибутов, таких как обработчики событий. Но сейчас поддерживается только проп key.
Без правильного присвоения ключей фрагментам в списках React выдаст предупреждение о ключах. Ключи помогают React:
Keyed Fragments могут принимать несколько props, таких как key, className и onClick, аналогично стандартным HTML элементам.
Новый — ещё не проверен сообществом
Вы