javascript / intermediate
Snippet
Fragmente mit Keys beim Mapping mehrerer Elemente
Während die Kurzschreibweise für Fragmente (<>...</>) weit verbreitet ist, unterstützt sie keine Attribute. Wenn man ein Array auf mehrere Geschwisterelemente mappt, muss die explizite 'Fragment'-Komponente verwendet werden, um einen 'key' zu vergeben, ohne ein umschließendes Div hinzuzufügen, das HTML-Strukturen wie Beschreibungslisten zerstören würde.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Fragment } from 'react';function Glossary({ terms }) {return (<dl>{terms.map(item => (<Fragment key={item.id}><dt>{item.term}</dt><dd>{item.definition}</dd></Fragment>))}</dl>);}
react
Erklärung
1
<Fragment key={item.id}>
Ermöglicht die Zuweisung eines eindeutigen Keys an eine Gruppe von Geschwisterelementen ohne zusätzlichen DOM-Knoten.
2
{terms.map(item => (...))}
Standard-Array-Mapping, das einen eindeutigen Key für den Reconciliation-Prozess von React erfordert.