8

我有一个看起来像这样的无状态 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 匹配）。当然，这足以通过这条规则吗？

4

3 回答 3

14

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

于 2017-12-18T15:02:03.530 回答
3

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

"rules": {
    "jsx-a11y/label-has-for": 0
 }
于 2018-06-18T10:00:08.713 回答
2

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

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

于 2017-11-21T01:08:31.613 回答