由于 pre-commit 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>
}
/>
渲染的組件如下所示： snackbar 組件
當我嘗試完全洗掉此組件時，eslint 在此檔案中甚至不存在的行上回傳了完全相同的錯誤。我不知道是什么原因造成的。如果有幫助，我會使用 Webpack 模塊捆綁器。
uj5u.com熱心網友回復：
經過一兩個小時的谷歌搜索并了解 ESLint 的作業原理后，我能夠解決這個問題，但我現在只能在這里發布答案。對于那個很抱歉。這是我學到的：
由于我的代碼大部分是用 TypeScript 撰寫的，ESLint 可能會對 JavaScript 編譯代碼進行 linting（因為 ESLint 是專門為 JavaScript 而不是 TypeScript 構建的），從而在 JS 檔案的行中拋出與我的 TS 檔案的行不匹配的錯誤。如果我錯了，請隨時糾正我，因為我沒有深入到完全理解這個問題的根本原因，只是解決它，然后......
為了在 VS Code 中更好地顯示 ESLint 錯誤訊息，我安裝了它的官方擴展，它在文本編輯器的正確行中突出顯示錯誤（無論您使用的是 JS 還是 TS）并建議快速解決方案。
就是這樣，感謝任何評論的人。希望這可能有用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/445951.html