React报错A form label must be associated with a control，配置无误仍未解决求排查

问题描述 #

我查找了多个与该报错相关的主题，但都没能解决问题。我的代码如下：

<input
  type="radio"
  name="variationType"
  value="pa_pay_baga"
  onChange={(e) => {
    props.handleChange(e, 'pa_pay_baga');
  }}
  className="btn-check"
  id="btn-check5"
/>
<label htmlFor="btn-check5" className="btn btn-primary-border">
  bla bla
</label>

我的lint配置如下：

"jsx-a11y/label-has-for": [ 0, {
  "components": [ "Label" ],
  "required": {
    "some": [ "id" ]
  }
}],

请问我还遗漏了什么设置？

解决方案 #

• 你当前配置的jsx-a11y/label-has-for规则已经在新版jsx-a11y中被废弃，替代它的是jsx-a11y/label-has-associated-control规则，旧规则的配置不会对新规则生效。
• 你现有配置中的components字段值为["Label"]，只会匹配首字母大写的自定义Label组件，你代码中使用的原生小写label标签不会被这套配置覆盖。
• 你配置的规则严重程度是0，也就是直接关闭规则，即使配置内容正确也不会生效。

你可以将lint配置替换为如下内容解决问题：

"jsx-a11y/label-has-associated-control": [ "error", {
  "required": {
    "some": [ "nesting", "id" ]
  }
}]

配置说明 #

• 移除了components配置项，默认会同时校验原生label和自定义Label组件，如果只需要校验原生标签可以额外添加配置"components": ["label"]
• required.some配置允许两种关联方式：input嵌套在label内、或者通过id与htmlFor关联，完全覆盖你当前的代码用法
• 第一个参数设置为error表示不符合规则时报错，你也可以根据需求改为1仅抛出警告，或者0关闭规则

如果确认要完全关闭相关校验，直接添加如下配置即可：

"jsx-a11y/label-has-associated-control": "off"

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