Предварительная фиксация ошибки eslint --fix из-за несуществующих ошибок

Я не могу зафиксировать изменения в файле из-за сбоя задачи eslint --fix перед фиксацией, которая возвращает следующие ошибки:

× eslint --fix:

C:\Users\user\source\repos\project\project-frontend\src\components\Header.tsx
  654:61  error  Visible, non-interactive elements with click handlers must have at least one keyboard listener  jsx-a11y/click-events-have-key-events
  654:61  error  Static HTML elements with event handlers require a role                                         jsx-a11y/no-static-element-interactions

✖ 2 problems (2 errors, 0 warnings)

Я попытался исправить эти ошибки, добавив прослушиватель клавиатуры и роль к компоненту и его дочернему компоненту кнопки в строке 654 указанного файла, что не сработало.

            <Snackbar
                role = "alert"
                tabIndex = {0}
                style = {{ right: '24px', textAlign: 'center' }}
                anchorOrigin = {{
                    vertical: 'bottom',
                    horizontal: 'left'
                }}
                open = {openLgpd}
                onClose = {handleCloseLgpd}
                onKeyDown = {handleCloseLgpd}
                message = "This is a message!"
                action = {
                    <Button role = "button" color = "secondary" size = "small" onKeyDown = {handleCloseLgpd} onClick {handleCloseLgpd}>
                        OK
                    </Button>
                }
             />

Я также пытался игнорировать эти ошибки, добавляя свойство aria-hidden к этому компоненту и его дочернему элементу, но это тоже не сработало:

             <Snackbar
                aria-hidden
                tabIndex = {0}
                style = {{ right: '24px', textAlign: 'center' }}
                anchorOrigin = {{
                    vertical: 'bottom',
                    horizontal: 'left'
                }}
                open = {openLgpd}
                onClose = {handleCloseLgpd}
                message = "This is a message!"
                action = {
                    <Button role = "button" color = "secondary" size = "small" aria-hidden onClick = {handleCloseLgpd}>
                        OK
                    </Button>
                }
             />

Отрендеренный компонент выглядит так: компонент закусочной

Когда я попытался полностью удалить этот компонент, eslint вернул точно такие же ошибки в строке, которой даже не было в этом файле. Я не знаю, что может быть причиной этого. Я использую сборщик модулей Webpack, если это помогает.

Какой являетсяButton? Он на самом деле использует role, aria-hidden, onKeyDown реквизит?

jonrsharpe 18.03.2022 16:19

Компонент Button присваивается как значение свойству действия Snackbar. Я только пытался добавить реквизиты role, aria-hidden и onKeyDown, чтобы решить эту ошибку, но, как я уже сказал, это не сработало. Так что нет, я не думаю, что он использует этот реквизит. Я добавил ссылку на изображение того, как выглядит визуализированный компонент.

SamSa 18.03.2022 16:36

«Линия, которой не существует» звучит странно/подозрительно. Как вы используете это как хук перед фиксацией?

torek 19.03.2022 02:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
33
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я смог решить эту проблему через час или два поиска в Google и понимания того, как работает ESLint, но я смог опубликовать ответ здесь только сейчас. Извини за это. Вот что я узнал:

  • Поскольку мой код был в основном написан на TypeScript, ESLint мог линтинговать скомпилированный код JavaScript (поскольку ESLint был создан специально для JavaScript, а не для TypeScript), что выдавало ошибки в строках файла JS, которые не соответствовали строкам моего файла TS. Не стесняйтесь исправлять меня, если я ошибаюсь, поскольку я не углубился настолько, чтобы полностью понять основную причину этой проблемы, просто решите ее и...

  • Чтобы лучше отображать сообщения об ошибках ESLint в VS Code, я установил его официальное расширение., который выделяет ошибки в правильных строках в текстовом редакторе (независимо от того, работаете ли вы с JS или TS) и предлагает их быстрое решение.

Вот и все, спасибо всем, кто прокомментировал. Надеюсь, это может быть полезно.

Другие вопросы по теме

Похожие вопросы