ReactJS - useId Hook

useId 是一個 React Hook，它在 React JS 的新版本 (18) 中引入。它用於生成唯一的 ID，以傳遞給輔助功能特性。

useId() Hook 生成在重新渲染之間保持不變的唯一 ID。它確保生成的 ID 在整個 React 應用中都是唯一的，並且直到使用該 ID 的元件從 DOM 中移除。如果元件被重新插入，則生成的 ID 將發生改變。

useId() Hook 的主要功能是為 HTML 表單元件生成唯一的 ID。它使在 React 中構建表單輸入和標籤時生成唯一 ID 變得更容易。

匯入

import { useId } from 'react';

要生成唯一的 ID，我們將在元件的頂層呼叫 useId。此 Hook 沒有引數。它返回與元件中此 useId 呼叫關聯的唯一 ID 字串。

如何使用它？

useId() Hook 非常易於使用。只需在元件程式碼中使用 const id = useId(); 來呼叫 Hook 即可。

現在檢視下面的示例，其中 useId Hook 用於在 MyForm 元件中獲取唯一 ID，以及連線標籤和輸入標籤。

function MyForm() {
   const id = useId();
   return (
      <>
         <label htmlFor={id}>User Name</label>
         <input id={id} type="text" placeholder={`Generated id is: ${id}`} />
      </>
   )
}

由 useId Hook 生成的 ID 對整個 React 應用來說都是唯一的。這意味著我們的應用中沒有其他元素將具有相同的 ID。只要使用它的元件保留在網頁的文件物件模型 (DOM) 中，此 ID 也將保持不變。

我們可以透過三種不同的方式使用“useId”。首先是為輔助功能屬性建立不同的 ID，其次是為多個相關專案建立 ID，第三是為所有生成的 ID 設定一個公共字首。

示例

因此，我們將逐一討論這三種方法。

示例 - 為輔助功能屬性建立不同的 ID

以下是在其中我們使用 useId Hook 為輔助功能屬性生成不同的 ID 建立了 UsernameField 元件的示例：

import React from "react";
import { useId } from "react";

function UsernameField() {
   const usernameHintId = useId();
   
   return (
      <>
         <label>
            Username:
            <input type="text" aria-describedby={usernameHintId} />
         </label>
         <p id={usernameHintId}>
            Your username should be unique and contain only letters and numbers.
         </p>
      </>
   );
}

export default function App() {
   return (
      <>
         <h2>Create Account</h2>
            <UsernameField />
         <h2>Login</h2>
         <UsernameField />
      </>
   );
}

輸出

在此示例中，我們建立了一個 UsernameField 元件，它使用 useId Hook 生成唯一的 usernameHintId。此 ID 用於將輸入欄位連結到其匹配的提示訊息，從而使元件可訪問。然後，此元件在 App 元件中再次使用，顯示了它如何能夠為不同的輸入欄位使用各種 ID 重用。

示例 - 為多個相關專案建立 ID

如果我們想要為多個相關專案分配 ID，那麼我們可以使用“useId”，它將為我們構建一個公共字首：

為了在表單中為名字、姓氏和電子郵件輸入欄位建立唯一的 ID，我們使用了三個單獨的 useId 函式。每個輸入欄位和標籤都有其自己的唯一 ID，從而提供了適當的可訪問性並避免了專案之間的衝突。

import React from 'react';
import { useId } from 'react';

export default function App() {
   const firstNameId = useId();
   const lastNameId = useId();
   const emailId = useId();
   
   return (
      <form>
         <label htmlFor={firstNameId}>First Name:</label>
         <input id={firstNameId} type="text" />
         <hr />
         <label htmlFor={lastNameId}>Last Name:</label>
         <input id={lastNameId} type="text" />
         <hr />
         <label htmlFor={emailId}>Email:</label>
         <input id={emailId} type="email" />
      </form>
   );
}

輸出

示例 - 為所有生成的 ID 設定一個公共字首

假設我們有多個 React 應用在同一網頁上執行。每個應用都可以使用 useId Hook 為輸入欄位和標籤等專案生成 ID。在設定每個應用時，我們可以定義一個唯一的“字首”，以確保一個應用的 ID 不會錯誤地與另一個應用的 ID 匹配。

index.js

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

const root1 = createRoot(document.getElementById('root1'), {
   identifierPrefix: 'app1-'
});
root1.render(<App />);
const root2 = createRoot(document.getElementById('root2'), {
   identifierPrefix: 'app2-'
});
root2.render(<App />);

App.js

import { useId } from 'react';

function ColorPicker() {
   const colorId = useId();
   console.log('Generated identifier:', colorId);
   return (
      <>
      <label htmlFor={colorId}>Select Color:</label>
      <input type="color" id={colorId} />
      </>
   );
}

export default function App() {
   return (
      <>
         <h2>Choose a color</h2>
         <ColorPicker />
      </>
   );
}

index.html

<!DOCTYPE html>
<html>
   <head><title>My Color Picker App</title></head>
<body>
   <div id="root1"></div>
   <div id="root2"></div>
</body>
</html>

輸出

在上面的示例中，它有兩個不同的 React 應用。在這裡，我們有兩個應用，每個應用都有其自己的標識字首（“app1-”和“app2-”）。這確保了即使這兩個應用都使用相同的 App 元件，useId Hook 提供的 ID 也不會衝突。

限制

useId 是一個很棒的工具，我們可以在 React 元件中使用它，但它也有一些限制。

我們應該只在元件的開頭或在我們建立的任何自定義工具中使用 useId。它不應該在迴圈或條件中使用。如果我們需要在某個地方使用它，則可以建立一個新元件並在其中包含 useId。
UseId 不應用於為列表生成鍵。相反，使用列表中的真實資料生成鍵。鍵幫助 React 跟蹤列表中的專案，最好為此使用真實資料。

reactjs_reference_api.htm

列印頁面