Question

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

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

我已将Text作为.eslintrc添加到controlComponent中，但仍然出现错误：

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 在 v6.1.0 中已弃用。改用 label-has-associated-control。

但是，为了提供答案，components 选项确定应检查哪些 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>

<块引用>

关闭已弃用的规则

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

在添加“文本”作为控件组件后，发生与通知的eslint相关的控件错误

1 个答案: