Fragment
Die Übersetzung dieser Seite fehlt oder ist veraltet, daher wird sie auf Englisch angezeigt. Auf Englisch lesen
Group siblings without creating another native view. Use it when a component returns several adjacent elements.
Return a title and artist together
import { Fragment, Text, VStack } from 'kuito';
const albums = [
{ id: 'a1', title: 'Night Drive', artist: 'Ada Ray' },
{ id: 'a2', title: 'Low Tide', artist: 'The Shoals' },
];
export default function Albums() {
return (
<VStack gap={4}>
{albums.map((album) => (
<Fragment key={album.id}>
<Text fontWeight="bold">{album.title}</Text>
<Text>{album.artist}</Text>
</Fragment>
))}
</VStack>
);
}Behavior
The shorthand <>...</> works when a key is unnecessary. Use the explicit component to provide a key. A fragment cannot supply layout, padding or a background; use a stack or Box for those.
Continue
Read Primitives for a complete workflow. See the complete prop reference for types and documented defaults.
Referenz
Signaturen
(props: FragmentProps): KuitoElementParameter
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
props | FragmentProps | Ja | — |
Rückgabe
Props: FragmentProps
Props (einschließlich geerbter Props) 2
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
children | KuitoNode | Nein | — |
key | string | number | Nein | — |
Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.