本文介绍了当存在htmlFor时,返回表单标签的jsx-a11y必须具有关联的控件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有这个组件:

// @flow
import React, { Element } from 'react';
import styles from './Label.scss';
import cs from 'classnames';

export const Label = ({
  id,
  htmlFor,
  invalid,
  required,
  children
}: {
  id: string,
  htmlFor: string,
  invalid: boolean,
  required: boolean,
  children: Element<*>
}) =>
  <label
    htmlFor={htmlFor}
    id={id}
    required={required}
    className={cs(
      styles.label,
      required ? styles.required : '',
      invalid ? styles.invalid : ''
    )}
  >
    {children}
  </label>;

Label.displayName = 'Label';

当我运行eslint时,即使有 htmlFor,我也会收到此错误消息

When I run eslint I get this error message even though there is an htmlFor:


推荐答案

在您的.eslintrc中,尝试以下操作:

In your .eslintrc, try the following:

"rules": {
        "jsx-a11y/label-has-for": [ 2, {
            "components": [ "Label" ],
            "required": {
                "some": [ "nesting", "id" ]
            },
            "allowChildren": false,
        }]
    }

这来自:

祝你好运!

这篇关于当存在htmlFor时,返回表单标签的jsx-a11y必须具有关联的控件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-23 06:06