添加“Text”作为控制组件后，React Informed eslint 关联控制错误

Answer 1

label-has-for 在 v6.1.0 中已弃用。请改用 label-has-linked-control。

删除已弃用的规则

// .eslintrc
"rules": {
  "jsx-a11y/label-has-for": "off",
  "jsx-a11y/label-has-associated-control": [ 2, {
    "labelComponents": [ "Label" ],
    "labelAttributes": ["label"],
    "required": "either"
  }]
}

但是，为了提供答案，组件选项确定应检查哪些 JSX 元素是否具有

htmlFor

属性，在您的情况下，从提供的信息中尚不清楚。

已弃用的规则：对于某些人

// .eslintrc
"rules": {
  "jsx-a11y/label-has-for": [ 2, {
    "components": [ "Label" ],
    "required": {
      "some": [ "nesting", "id" ]
    }
  }]
}

// Label component
const Label = ({htmlFor, label}) => <label htmlFor={htmlFor}>{label}</label>

// usage
<Label htmlFor="test" label="label" />
<input id="test"></input>

已弃用的规则：对于每个

// .eslintrc
"jsx-a11y/label-has-for": [ 2, {
  ...
  "required": {
    "every": [ "nesting", "id" ]
  }
}]

// usage
<Label htmlFor="test" label="label">
  <input id="test"></input>
</Label>