useId הוא React TK ליצירת מזהים ייחודיים2_ אפשר להעביר למאפיינים נגישות.

const id = useId()

הפניה

useId()

קראו ל-useId ברמה העליונה של הקומפוננטה כדי ליצור מזהה ייחודית:

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...

עוד דוגמאות נוספות.

פרמטרים

useId לא מקבל פרמטרים.

מחזירה

useId מחזיר מחרוזת מזהה ייחודית שמשויכת לקריאה הספציפית הזו ל-useId בתוך הקומפוננטה הספציפית הזו.

אזהרות

  • useId הוא Hook, אז אפשר לקרוא לו רק ברמה העליונה של הקומפוננטה או של Hooks משלכם. אי אפשר לקרוא לו בתוך לולאות או תנאים. אם צריך את זה, חלצו קומפונטה חדשה והעבירו אליה את ה-state.

  • לא צריך להשתמש ב-useId כדי להשתמש במפתחות ברשימה. Keys צריכים להיווצר מהנתונים שלכם.

שימוש

Pitfall

אל תקראו ל-useId כדי למפתחות ברשימה. Keys צריכים להיווצר מהנתונים שלכם.

יצירת מזהים ייחודיים למאפיינים נגישות

קראו ל-useId ברמה העליונה של הקומפוננטה כדי ליצור מזהה ייחודית:

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  // ...

לאחר מכן אפשר להעביר את המזהה אנשים למאפיינים שונים:

<>
  <input type="password" aria-describedby={passwordHintId} />
  <p id={passwordHintId}>
</>

בואו נעבור על דוגמה כדי לראות מתי זה שימושי.

מאפיינים נגישות ב-HTML כמו aria-describedby מאפשרים לציין ששתי תגיות קשורות זו לזו. למשל, אפשר לציין שאלמנט אחד (כמו קלט) מתואר על ידי אלמנט אחר (כמו פסקה).

ב-HTML רגיל, הייתם כותבים כך:

<label>
  Password:
  <input
    type="password"
    aria-describedby="password-hint"
  />
</label>
<p id="password-hint">
  The password should contain at least 18 characters
</p>

אבל קידוד קשיח של מזהים כך הוא לא פרקטיקה טובה ב-React. קומפוננטה יכולה להירנדר יותר מפעם אחת בעמוד, אבל זיהויים חייבים להיות ייחודיים. במקום קוד קשיח של ID, צרו ID ייחודי עם useId:

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  return (
    <>
      <label>
        Password:
        <input
          type="password"
          aria-describedby={passwordHintId}
        />
      </label>
      <p id={passwordHintId}>
        The password should contain at least 18 characters
      </p>
    </>
  );
}

עכשיו, גם אם PasswordField מופיעה פעמים על המסך.

import { useId } from 'react';

function PasswordField() {
  const passwordHintId = useId();
  return (
    <>
      <label>
        Password:
        <input
          type="password"
          aria-describedby={passwordHintId}
        />
      </label>
      <p id={passwordHintId}>
        The password should contain at least 18 characters
      </p>
    </>
  );
}

export default function App() {
  return (
    <>
      <h2>Choose password</h2>
      <PasswordField />
      <h2>Confirm password</h2>
      <PasswordField />
    </>
  );
}

צפו בסרטון הזה כדי לראות את ההבדל בחוויית המשתמש עם טכנולוגיות מסייעות.

Pitfall

עם עיבוד שרת, useId דורש עץ קומפוננטות זהה בצד השרת ובצד הלקוח. אם העצים הם מרנדרים בשרת ובלקוח לא תואמים בדיוק, המזהים אנשים לא אתאימו.

Deep Dive

למה useId עדיף על מונה עולה?

אולי אתם שואלים למה useId עדיף על הגדלת ranking גלובלי כמו nextId++.

זהו המרכזי של useId הוא ש-React מבטיחה שהיא עובדת עם עיבוד שרת. בזמן רינדור שרת, הקומפוננטות מייצרות פלט HTML. אחר כך, חוץ מלקוחות, hydration מחבר את מטפלי האירועים ל-HTML עבור HTML. כדי ש-hydration יעבוד, פלט הלקוח חייב להתאים ל-HTML של השרת.

קשה מאוד זאת עם מונה עולה, כי סדר ה-hydration של רכיבי לקוח עשוי לא להתאים לסדר שבו ה-HTML נוצר בשרת. בקריאה ל-useId, אתם מבטיחים שה-hydration יעבוד, ושהפלט מתאים בין השרת ללקוח.

בתוך React, useId נוצר מתוך “נתיב אב” של הקומפוננטה הקוראת. לכן, אם העץ בלקוח ובשרת זהה, ה-”נתיב ההורים” יתאים בלי קשר לסדר הרינדור.

יצירת IDs לכמה אלמנטים קשורים

אם צריך לתת מזהים לכמה אלמנטים קשורים, אפשר לקרוא ל-useId כדי ליצור קידומת משותפת עבורם:

import { useId } from 'react';

export default function Form() {
  const id = useId();
  return (
    <form>
      <label htmlFor={id + '-firstName'}>First Name:</label>
      <input id={id + '-firstName'} type="text" />
      <hr />
      <label htmlFor={id + '-lastName'}>Last Name:</label>
      <input id={id + '-lastName'} type="text" />
    </form>
  );
}

כך אפשר מקריאה ל-useId עבור כל קוד זיהוי בודד.

הגדרת קידומת משותפת לכל ה-IDs תכונות

אם אתם מרנדרים כמה אפליקציות React עצמאיות באותו עמוד, העבירו identifierPrefix כאופציה לקריאות createRoot או hydrateRoot שלכם. כך מובטח שה-IDs מתאים בשתי האפליקציות לא נגשו, כי כל מזהה עובד עם T בק_3 יתחילידומת הייחודית שהגדרתם.

import { createRoot } from 'react-dom/client';
import App from './App.js';
import './styles.css';

const root1 = createRoot(document.getElementById('root1'), {
  identifierPrefix: 'my-first-app-'
});
root1.render(<App />);

const root2 = createRoot(document.getElementById('root2'), {
  identifierPrefix: 'my-second-app-'
});
root2.render(<App />);

שימוש באותה קידומת ID בלקוח ובשרת

אם אתם מרנדרים כמה אפליקציות שReact עצמאיות באותו עמוד, וחלק מהאפליקציות האלה מרונדרות בשרת, ודאו שה-identifierPrefixהם מעבירים לקריאה ל-hydrateRoot מעבירים ל-שרת APIs, כמו renderToPipeableStream.

// Server
import { renderToPipeableStream } from 'react-dom/server';

const { pipe } = renderToPipeableStream(
  <App />,
  { identifierPrefix: 'react-app1' }
);
// Client
import { hydrateRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = hydrateRoot(
  domNode,
  reactNode,
  { identifierPrefix: 'react-app1' }
);

אין צורך להעביר identifierPrefix אם יש לכם רק אפליקציית React אחת בעמוד.

PrevioususeEffect
NextuseImperativeHandle

How do you like these docs?