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。

已定义“片段”，但从未在使用ESLint的React应用程序中使用no-unused-vars警告

1 个答案: