“Fragment”已定义,但从未在React app使用ESLint时使用no unused vars警告

我是相当新的反应,我已经创建了一个新的应用程序使用 create-react-app 然后开始玩弄它。当我运行应用程序时,会收到以下警告:

Compiled with warnings.

./src/index.js
  Line 1:  'Fragment' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

以下代码在我的 应用程序.js :

import React, { Component, Fragment } from "react";
import Header from "./Layouts/Header";
import Footer from "./Layouts/Footer";

export default class extends Component {
  render() {
    return (
      <Fragment>
        <Header />
        <p>Hello World</p>
        <Footer />
      </Fragment>
    );
  }
}

在我的字典里是这样用的 索引.js

import React, { Fragment } from "react";
import ReactDOM from "react-dom";
import registerServiceWorker from "./registerServiceWorker";
import App from "./Components/App";

ReactDOM.render(<App />, document.getElementById("root"));
registerServiceWorker();

我已经为ESLint安装了react插件,这是我在应用程序中使用的配置 埃斯林特

{
  "plugins": ["react"],
  "rules": {
    "react/jsx-uses-react": 2
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"]
}

有没有办法解决这个警告?