片段应包含多个 child - 否则根本不需要片段 react/jsx-no-useless-fragment

Question

我在我的 React 项目的 app.js 文件中收到此错误：-

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import NavMenu from './components/NavMenu';

export default function App() {
  return (
    <>
      <Router>
        <NavMenu />
      </Router>
    </>
  );
}

我一直在努力寻找解决方案，但一直找不到，所以有人可以告诉我如何解决这个问题

如有任何帮助，我们将不胜感激

Answer 1

您的组件 return 相当于：

    <React.Fragment>
      <Router>
        <NavMenu />
      </Router>
    </React.Fragment>

<></> 是 shorthand 语法。

该片段适用于您想要 return 多个组件或元素作为同级元素的情况。但是因为一个组件只能 return 一件事，我们可以使用片段在两个组件周围放置一种“隐形包装器”，使它们看起来是一个。

下面是组件可能希望使用片段的示例：

  return (
    <>
      <Navbar />
      <Router>
        <Routes>
          <Route index element={<Home />} />
        </Routes>
      </Router>
    </>
  );

因为您只是 return 在该片段中添加一个元素，它实际上没有做任何事情，所以只需删除该片段或在其中包含另一个组件。

Answer 2

React 不应该 return 相邻元素，所以如果你只是 return 一个组件或元素，则不需要使用 <></> 或 <React.Fragment></React.Fragment>（这些是等价的）。

您可能会遇到需要 return 2 div 个元素并排放置的情况（例如兄弟姐妹）。那样的话<></>就派上用场了。

Answer 3

我今天遇到了同样的错误，因为我有以下方式的三元运算符：

<>
  {isCheck ? (
    <button
     ....
    >
    </button>
  ) : (
    <div className={class}>
     ....
    </div>
  )}
</>

我意识到，如果没有包装元素，它就不是运行它应该是的样子。

我的解决方案是将 Fragment 替换为 div。这让 lint 很高兴，红旗也消失了。

Answer 4

React 不应该 return 相邻元素，所以如果你只是 return 一个组件或元素，则不需要使用 <></>.

删除<> </>，因为它现在可能会妨碍您的程序

但将来您可能需要使用这些组件超过 1 个。

片段应包含多个 child - 否则根本不需要片段 react/jsx-no-useless-fragment

Fragments should contain more than one child - otherwise, there‘s no need for a Fragment at all react/jsx-no-useless-fragment

javascript

error-handling

jsx

reactjs