Question

我有一个无状态的React组件，如下所示：

const propTypes = exact({
  fieldId: PropTypes.string.isRequired,
  text: PropTypes.string.isRequired,
});

function Label({ fieldId, text }) {
  return (
    <label htmlFor={fieldId}>{text}</label>
  );
}

Label.propTypes = propTypes;

我正在使用airbnb配置扩展的eslint。我的eslint看起来像这样：

{
  "extends": "airbnb"
}

我的React代码抛出此错误：

error  Form label must have associated control  jsx-a11y/label-has-for

我已经明确设置了一个htmlFor属性，其中包含一个有效的唯一ID字符串（与其他地方的输入上的id匹配）。当然，这足以通过这条规则了吗？

Answer 1

除了设置htmlFor属性和id之外，输入元素必须嵌套在标签内。但是，如果需要，您可以关闭嵌套要求。像这样：

{
  "extends": "airbnb",
  "rules": {
    "jsx-a11y/label-has-for": [ 2, {
      "required": {
          "every": [ "id" ]
      }
  }]
  }
}

与您的问题相关的问题： https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/314

文档： https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md

Answer 2

Eslint并不了解在代码中其他位置呈现的输入元素。您所获得的错误并不是抱怨htmlFor属性本身，它抱怨说，就您所知，htmlFor没有问题。引用表单控件元素（即 - 您的输入）。

尝试在同一组件中将标签与标签一起渲染，此错误应该消失。

Answer 3

您似乎已经在<input/>标记中单独使用了它。根据{{3}}，您应该将<input/>放在<label/>内。或者您可以像这样设置.eslintrc

"rules": {
    "jsx-a11y/label-has-for": 0
 }

在React中使用htmlFor传递eslint html-has-for

3 个答案: