javascript / intermediate
Snippet
Eindeutige IDs mit useId generieren
useId ist ein Hook zum Generieren eindeutiger IDs, die über Server-Side-Rendering und Client-Side-Hydration hinweg stabil sind. Er wird primär verwendet, um Labels und Inputs für die Barrierefreiheit zu verknüpfen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function LoginForm() {const id = React.useId();return (<form><div><label htmlFor={id + '-user'}>Username</label><input id={id + '-user'} type="text" /></div><div><label htmlFor={id + '-pass'}>Password</label><input id={id + '-pass'} type="password" /></div></form>);}
react
Erklärung
1
const id = React.useId();
Erstellt ein eindeutiges, stabiles Präfix für IDs innerhalb dieser Komponenteninstanz.
2
htmlFor={id + '-user'}
Verknüpft das Label mit dem Eingabefeld, damit assistive Technologien die Verbindung erkennen können.