如何在可复用React组件中关联文本输入框与错误提示

要实现输入框和错误提示的无障碍关联，核心是给错误提示元素生成唯一且可复用的ID——aria-describedby需要的是元素ID而非DOM引用，所以refs在这里并不适用。针对组件复用场景，React有两种可靠的实现方案：

方法1：使用React 18+的useId钩子（推荐） #

useId是React内置的专属钩子，专门为无障碍场景生成唯一ID，能确保服务端渲染(SSR)与客户端渲染的ID一致，同时彻底避免组件复用时的ID冲突。

修改后的组件代码：

import { useId } from 'react';

const TextInput = React.forwardRef<HTMLInputElement, ITextInputProps>(
  ({ error, ...props }, ref) => {
    // 生成唯一ID
    const errorId = useId();

    return (
        <>
            <input
                type="text" 
                // 有错误时绑定ID，无错误时设为undefined避免无效引用
                aria-describedby={error ? errorId : undefined}
                ref={ref}
                {...props}
            />
            {error && (
                <p id={errorId}>
                    {error}
                </p>
            )}
        </>
    )}
)

方法2：手动生成唯一ID（兼容React 17及以下） #

如果项目仍在使用React 17或更低版本，可以手动生成唯一ID，比如结合前缀与随机字符串：

const TextInput = React.forwardRef<HTMLInputElement, ITextInputProps>(
  ({ error, ...props }, ref) => {
    // 组件挂载时生成唯一ID
    const [errorId] = React.useState(() => `text-input-error-${Math.random().toString(36).slice(2)}`);

    return (
        <>
            <input
                type="text" 
                aria-describedby={error ? errorId : undefined}
                ref={ref}
                {...props}
            />
            {error && (
                <p id={errorId}>
                    {error}
                </p>
            )}
        </>
    )}
)

关键注意事项 #

• 当没有错误信息时，必须把aria-describedby设为undefined或空字符串，避免屏幕阅读器尝试查找不存在的ID，引发无障碍问题。
• 无需使用refs：aria-describedby属性接收的是ID字符串，而非DOM节点引用，refs在此场景下无法满足需求。

内容的提问来源于stack exchange，提问作者Obvious_Grapefruit