网站编程代码,沈阳定制网带式电加热烘箱,比较好的做展会邀请函的网站,南京360推广 网站建设在 React 中直接编写 ID 并不是一个好的习惯。一个组件可能会在页面上渲染多次#xff0c;但是 ID 必须是唯一的#xff01;不要使用自己编写的 ID#xff0c;而是使用 useId 生成唯一的 ID。 现在#xff0c;即使 PasswordField 多次出现在屏幕上#xff0c;生成的 ID 并… 在 React 中直接编写 ID 并不是一个好的习惯。一个组件可能会在页面上渲染多次但是 ID 必须是唯一的不要使用自己编写的 ID而是使用 useId 生成唯一的 ID。 现在即使 PasswordField 多次出现在屏幕上生成的 ID 并不会冲突。 import { useId } from react;function PasswordField() {const passwordHintId useId();return (label密码:inputtypepasswordaria-describedby{passwordHintId}//labelp id{passwordHintId}密码应该包含至少 18 个字符/p/);
}如果你需要为多个相关元素生成 ID可以调用 useId 来为它们生成共同的前缀 可以使你避免为每个需要唯一 ID 的元素调用 useId。
import { useId } from react;export default function Form() {const id useId();return (formlabel htmlFor{id -firstName}名字/labelinput id{id -firstName} typetext /hr /label htmlFor{id -lastName}姓氏/labelinput id{id -lastName} typetext //form);
}
如果你在单个页面上渲染多个独立的 React 应用程序请在 createRoot 或 hydrateRoot 调用中将 identifierPrefix 作为选项传递。这确保了由两个不同应用程序生成的 ID 永远不会冲突因为使用 useId 生成的每个 ID 都将以你指定的不同前缀开头。
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 /);为什么要使用useId
React 支持开箱即用的同构在同构应用中渲染列表时如果我们没有一个唯一的 id
很多人习惯使用 Math.random 或类似 uuid 这样的库来生成一个唯一 id。
但这些方法有一个共同的缺点当程序运行时由服务端生成的 uuid 或 Math.random会和客户端生成的不同。React 的 useId hook 确保生成的 id 在组件内是唯一的。
