ESLint 是用于识别并报告 ECMAScript/JavaScript 代码中某些模式的 linting 工具。在使用 React 进行开发时，我们经常会遇到 ESLint Build Warning 的报错。这些报错通常会提示代码中存在隐藏的逻辑问题或潜在的错误，但它们也可能会很烦人，尤其是当它们看起来似乎既没有逻辑问题也没有潜在错误的情况下。在本文中，我们将讨论一些常见的 ESLint Build Warning，以及如何解决它们，从而帮助您更轻松地使用 React 进行开发。
问题 1：'React' must be in scope when using JSX react/react-in-jsx-scope
当我们使用 JSX 时，我们需要在文件的顶部导入 React，如下所示：
import React from 'react';
function App() {
return <h1>Hello world!</h1>;
}
export default App;如果我们忘记导入 React 或者使用其他名称导入 React，我们将在编译过程中收到 'React' must be in scope when using JSX react/react-in-jsx-scope 的警告：
function App() {
return <h1>Hello world!</h1>;
}
// ERROR: 'React' must be in scope when using JSX react/react-in-jsx-scope
export default App;为了解决这个问题，我们只需要在文件的顶部导入 React，并确保使用了正确的名称：
import React from 'react';
function App() {
return <h1>Hello world!</h1>;
}
export default App;问题 2：'useState' is defined but never used no-unused-vars
当您在代码中定义了 useState，但从未使用它时，您将会看到 no-unused-vars 的警告：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- -------- ----- - ----- ------- --------- - ------------ ------ --------- ------------ - -- -------- ---------- -- ------- --- ----- ---- -------------- ------ ------- ----
如果我们希望使用状态变量，则可以在返回的 JSX 中使用它：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- ----- -
----- ------- --------- - ------------
------ -
-----
--------- -----------
------ ------- ------- ---------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-
------ ------- ----问题 3：'className' is not defined jsx-a11y/label-has-associated-control
当您使用 JSX 时，通常需要将 className 属性用于元素类名，但有时您可能会使用 class 属性而不是 className。此时您将受到 jsx-a11y/label-has-associated-control 的警告：
function App() {
return <div class="container">Hello world!</div>;
}
// WARNING: 'className' is not defined jsx-a11y/label-has-associated-control
export default App;为了解决这个问题，您只需要使用 className 属性而不是 class：
function App() {
return <div className="container">Hello world!</div>;
}
export default App;问题 4：'label htmlFor' is not defined jsx-a11y/label-has-associated-control
通常在使用表单控件时，我们会使用 label 元素来与表单控件绑定，以便帮助用户识别所需的输入项。在 JSX 中，我们使用 htmlFor 属性将 label 与对应的表单控件相关联。但有时，当您在使用 label htmlFor 时，将会受到 jsx-a11y/label-has-associated-control 的警告：
-- -------------------- ---- -------
-------- ----- -
------ -
------
------ ------------------------------------
------ ----------- --------------- --
-------
--
-
-- -------- ------ -------- -- --- ------- -------------------------------------
------ ------- ----为了解决这个问题，您只需要使用正确的属性名称，将 htmlFor 替换为 for：
-- -------------------- ---- -------
-------- ----- -
------ -
------
------ --------------------------------
------ ----------- --------------- ------------- --
-------
--
-
------ ------- ----总结
在使用 React 进行开发时，您可能会遇到多种不同的 ESLint Build Warning。理解这些警告的含义，并知道如何解决它们，可以帮助您更轻松地进行开发工作。在本文中，我们讨论了四个常见的 ESLint Build Warning，包括 'React' must be in scope when using JSX react/react-in-jsx-scope，'useState' is defined but never used no-unused-vars，'className' is not defined jsx-a11y/label-has-associated-control 和 'label htmlFor' is not defined jsx-a11y/label-has-associated-control。我们提供了解决这些警告的具体步骤，并提供了示例代码来帮助您深入了解这些问题的解决方案。希望这篇文章对您使用 React 进行开发有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469c818968c7c53b099a54d