'Fragment'已定义，但从未使用过使用ESLint的React app警告no-unused-vars

Question

我是React的新手，我使用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.

以下代码在我的App.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>
    );
  }
}

在我的index.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插件，这是我在.eslintrc中使用的配置

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

有任何想法如何解决此警告？

Answer 1

你有这条线

import React, { Fragment } from "react";

在你的index.js文件中，但你没有在该文件中的任何地方使用Fragment。您可以通过将导入行更改为：

import React from "react";

编辑：请注意import文件中相同的App.js完全有效，因为您在该文件中使用Fragment。