JSX-A11Y返回的窗體標籤必須有相關的控制時，有一個htmlFor

Question

我有這個組件：

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

error: Form label must have associated control (jsx-a11y/label-has-for) at packages/ds-component-library/src/components/atoms/Label/Label.js:19:3:

Answer 1

在你.eslintrc，請嘗試以下操作：：

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

這是從哪裏來的

祝你好運！