パスeslintのhtml-あり-ためhtmlForと私はステートレスはこのようになりますコンポーネントリアクト持っ

Question

を反応させるのに：私がAirbnbの設定で拡張eslintを使用しています

const propTypes = exact({ 
    fieldId: PropTypes.string.isRequired, 
    text: PropTypes.string.isRequired, 
}); 

function Label({ fieldId, text }) { 
    return (
    <label htmlFor={fieldId}>{text}</label> 
); 
} 

Label.propTypes = propTypes; 

を。

error Form label must have associated control jsx-a11y/label-has-for 

私ははっきりと（他の場所での入力でIDと一致する）、有効な一意のID文字列でhtmlFor属性を設定しています

{ 
    "extends": "airbnb" 
} 

私のコードは、このエラーをスローリアクト：私のeslintは、このようになります。確かにこれはこのルールを通過するのに十分ですか？

Answer 1

Eslintは、コード内の他の場所でレンダリングされている入力要素を認識しません。あなたが得ているエラーは、それ自体がhtmlFor属性について不平を言っているわけではありませんが、あなたが言うことができる限り、あなたのhtmlForはフォームコントロール要素（あなたの入力）を参照していないと不平を言っています。

同じコンポーネント内のラベルに沿って入力をレンダリングしてみてください。このエラーは消えるはずです。

Answer 2

htmlFor属性とidを設定することに加えて、input要素はラベル内にネストする必要があります。 ただし、必要に応じてネスティング要件をオフにすることはできます。このような何か：

{ 
    "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