React Informed, связанная с ошибкой управления eslint после добавления "Text" в качестве компонента управления
Я пытаюсь добавить пакет informed в свой проект, но получаю сообщение об ошибке, когда добавляю такие компоненты:
<Form id = "intro-form">
<label htmlFor = "intro-name">
First name:
<Text field = "name" id = "intro-name" />
</label>
<button type = "submit">Submit</button>
</Form>
Я добавил Text в свой .eslintrc как controlComponent, но все еще получаю сообщение об ошибке:
eslint] Form label must have ALL of the following types of associated control: nesting, id (jsx-a11y/label-has-for)
Я предполагаю, что это неправильный способ добавить это в мой файл .eslintrc?
{
"rules": {
"jsx-a11y/label-has-associated-control": [ 2, {
"labelComponents": ["label"],
"labelAttributes": ["htmlFor"],
"controlComponents": ["Text"]
}]
},
"parser": "babel-eslint",
"extends": [
"airbnb"
]
}
Когда я меняю Text на input, ошибка исчезает, поэтому мне кажется, что я неправильно понимаю, как это работает. Есть предложения, как разрешить Text в качестве приемлемого input?
@kellymandem К сожалению, я этого не сделал. Он все еще там.
Ответы 1
label-has-for устарел в v6.1.0. Вместо этого используйте метка-имеет-связанный-элемент управления.
Однако, чтобы дать ответ, опция компонентов определяет, какие элементы JSX должны быть проверены на наличие опоры htmlFor, что в вашем случае неясно из предоставленной информации.
for some
// .eslintrc
"rules": {
"jsx-a11y/label-has-for": [ 2, {
"components": [ "Label" ],
"required": {
"some": [ "nesting", "id" ]
}
}]
}
// Label component
const Label = ({htmlFor, label}) => <label htmlFor = {htmlFor}>{label}</label>
// usage
<Label htmlFor = "test" label = "label" />
<input id = "test"></input>
for every
// .eslintrc
"jsx-a11y/label-has-for": [ 2, {
...
"required": {
"every": [ "nesting", "id" ]
}
}]
// usage
<Label htmlFor = "test" label = "label">
<input id = "test"></input>
</Label>
turn off deprecated rule
// .eslintrc
"rules": {
"jsx-a11y/label-has-for": "off",
"jsx-a11y/label-has-associated-control": [ 2, {
"labelComponents": [ "Label" ],
"labelAttributes": ["label"],
"required": "either"
}]
}
Как вы решили эту проблему?