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

Question

我正在尝试将 informed 包添加到我的项目中，但是当我像这样添加组件时，eslint 出现错误：

    <Form id="intro-form">
      <label htmlFor="intro-name">
        First name:
        <Text field="name" id="intro-name" />
      </label>
      <button type="submit">Submit</button>
    </Form>

我已将 Text 作为 controlComponent 添加到我的 .eslintrc，但我仍然收到错误消息：

eslint] Form label must have ALL of the following types of associated control: nesting, id (jsx-a11y/label-has-for)

我猜这不是将其添加到我的 .eslintrc 文件的正确方法？

{
    "rules": {
      "jsx-a11y/label-has-associated-control": [ 2, {
        "labelComponents": ["label"],
        "labelAttributes": ["htmlFor"],
        "controlComponents": ["Text"]
      }]
  },
    "parser": "babel-eslint",
    "extends": [
      "airbnb"
    ]
  }

当我将 Text 更改为 input 时，错误消失了，所以感觉我误解了它的工作原理。关于如何允许 Text 作为可接受的 input 的任何建议？

Answer 1

label-has-for was deprecated in v6.1.0. Use label-has-associated-control 代替。

但是，为了提供答案，components 选项确定应检查哪些 JSX 元素是否具有 htmlFor 属性，在您的情况下，从提供的信息中不清楚。

for some

// .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>

for every

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

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

turn off deprecated rule

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

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

React Informed eslint associated control error after adding "Text" as control component

lint

reactjs

eslint