在 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 相匹配）。确定这足以通过此规则？

Answer 1

Eslint 不知道在代码中其他地方呈现的输入元素。你得到的错误并不是抱怨 htmlFor 属性本身，它抱怨的是，据它所知，你的 htmlFor 没有引用表单控制元素（即 - 你的输入）。

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

Answer 2

除了设置 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 3

您似乎已将它与 <input/> 标签分开使用。根据 source docs 你应该把 <input/> 放在 <label/> 里面。或者你可以像这样设置你的 .eslintrc

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

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

Pass eslint html-has-for with htmlFor in React

javascript

reactjs

eslint

eslint-config-airbnb