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

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 相匹配）。这肯定足以通过这条规则吗？

原文由 CaribouCode 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 devk 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

似乎您已将它与 <input/> 标签分开使用。根据 源文档，您应该将 <input/> 放在 <label/> 中。或者你可以像这样设置你的 .eslintrc

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

原文由 Ihor 发布，翻译遵循 CC BY-SA 4.0 许可协议