代码之家 › 专栏 › 技术社区 › CaribouCode

在React中用htmlFor传递eslint html的for

eslint-config-airbnb eslint reactjs javascript

CaribouCode · 技术社区 · 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匹配)的属性。这就足够通过这条规则了吗?

3 回复 | 直到 8 年前

devk 8 年前

除了设置 htmlFor 属性和an 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

Ihor 8 年前

看起来你已经把它和你的 <input/> 标签根据 source docs 你应该把 <输入/> 内部 <label/> . 或者你可以设置你的。像这样

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

Donny West 8 年前

Eslint不知道代码中其他地方呈现的输入元素。你得到的错误不是抱怨 htmlFor 属性本身,它在抱怨,据它所知,你的 htmlFor公司 不引用表单控件元素(即您的输入)。

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前