IT技术 - jsx-a11y 返回Form 标签必须有htmlFor 时关联控件 - 吾爱随笔录

我有这个组件：

// @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：

错误：表单标签必须在包/ds-component-library/src/components/atoms/Label/Label.js:19:3 处具有关联控件（jsx-a11y/label-has-for）：

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