如何规避ESLint Airbnb规则，无属性展开使用React Hook Form register函数

Airbnb的ESLint规则react/jsx-props-no-spreading禁止属性展开，但可以通过解构register返回的props并逐个传递的方式替代，无需忽略规则提示。

具体实现步骤： #

1. 先解构register函数返回的核心属性：

const { name, onChange, onBlur, ref } = register('password', { required: true });

2. 将解构出的属性逐个添加到输入框组件上：

<input
  className="block w-full box-border rounded-lg mb-5 text-sm p-[1em] border-[1px] border-gray-400 h-[46.8px]"
  id="passwordInput"
  type="password"
  name={name}
  onChange={onChange}
  onBlur={onBlur}
  ref={ref}
/>

补充说明： #

• register函数返回的props核心就是name、onChange、onBlur和ref，这些是React Hook Form追踪输入值、处理验证的必要属性。
• 如果你的register配置了额外规则（比如maxLength、pattern），或者返回了其他属性，只需将对应的属性也解构并传递即可。

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