在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

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