在 React 开发中，我们经常需要使用一个根元素将所有子元素包裹起来，如下例所示：
----------------
-----
--------- ----------
-------
-------------------------------
--但是，有时候我们会在某些场景下需要忽略这个根元素，例如在使用 React.Fragment 组件时：
----------------
----------------
--------- ----------
------------------
-------------------------------
--这个时候，使用 ESLint 检查时就会报错，如下例所示：
----- --- ----------- ---- ---- --- ------ ------- ---------------------------------
这是因为 react/jsx-one-expression-per-line 规则默认情况下要求 JSX 代码中每个元素都必须有一个父元素。但是，我们可以通过配置 .eslintrc 文件来忽略这个规则。
具体的做法是在 .eslintrc 文件中添加以下配置：
-
-------- -
------------------------------------ --------- - -------- -------------- --
-
-这个配置项的作用是将 react/jsx-one-expression-per-line 规则中的 allow 参数设置为 single-child，表示允许 JSX 元素只有一个子元素。
这样，当我们使用 React.Fragment 组件时，ESLint 就会忽略这个根元素，不再报错。
总结起来，如果需要在 React 项目中忽略某些不必要的根元素，可以通过修改 .eslintrc 文件中的 react/jsx-one-expression-per-line 规则配置实现。
参考代码：
----------------
----------------
--------- ----------
------------------
-------------------------------
--参考链接：
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6484065f48841e9894337e9f