useId

useId 是一个 React Hook,可以生成传递给无障碍属性的唯一 ID。

  • 保证稳定 id
  • 做一些公共数据处理

公共前戳

import { useId } from 'react';

const text = useId();
<div className={`${text}_1`}> 前戳 1 </div>
<div className={`${text}_2`}> 前戳 2 </div>

无障碍阅读

// 没了解过,自定探索
import { useId } from "react";

function LoginForm() {
	const emailId = useId();
	const passwordId = useId();

	return (
		<form>
			<div>
				<label htmlFor={emailId}>邮箱:</label>
				<input id={emailId} type='email' />
			</div>
			<div>
				<label htmlFor={passwordId}>密码:</label>
				<input id={passwordId} type='password' />
			</div>
		</form>
	);
}