javascript - How to fix "Component is defined but never used" for eslint in react? - Stack Overflow

admin管理员组

文章数量:1244247

This is the config i have for eslint in .eslintrc.json file:

 {
        "env": {
            "browser": true,
            "monjs": true,
            "es6": true
        },
        "extends": "eslint:remended",
        "parserOptions": {
            "ecmaVersion": 6,
            "ecmaFeatures": {
                "experimentalObjectRestSpread": true,
                "jsx": true
            },
            "sourceType": "module"
        },
        "plugins": [
            "react"
        ],
        "rules": {
            "react/jsx-uses-react": "error",
            "react/jsx-uses-vars": ["error"],
            "indent": 0,
            "linebreak-style": [
                "error",
                "windows"
            ],
            "quotes": [
                "error",
                "single"
            ],
            "semi": [
                "error",
                "always"
            ]
        },
        "settings": {
        "react": {
          "pragma": "React",
          "version": "15.0"
        }
      }
    }

This is the app.jsx from the react workspace below:

 import React, { Component } from 'react';

    class App extends React.Component {
      render () {
        return(
          <h1>Hello Newbies</h1>
        );
      }
    }

    export default App;

I am getting error from eslint 'Component' is defined but never used. I can not fix this by doing anything so far but digging the web. How can i fix this error? Help would be very much appreciated.

This is the config i have for eslint in .eslintrc.json file:

 {
        "env": {
            "browser": true,
            "monjs": true,
            "es6": true
        },
        "extends": "eslint:remended",
        "parserOptions": {
            "ecmaVersion": 6,
            "ecmaFeatures": {
                "experimentalObjectRestSpread": true,
                "jsx": true
            },
            "sourceType": "module"
        },
        "plugins": [
            "react"
        ],
        "rules": {
            "react/jsx-uses-react": "error",
            "react/jsx-uses-vars": ["error"],
            "indent": 0,
            "linebreak-style": [
                "error",
                "windows"
            ],
            "quotes": [
                "error",
                "single"
            ],
            "semi": [
                "error",
                "always"
            ]
        },
        "settings": {
        "react": {
          "pragma": "React",
          "version": "15.0"
        }
      }
    }

This is the app.jsx from the react workspace below:

 import React, { Component } from 'react';

    class App extends React.Component {
      render () {
        return(
          <h1>Hello Newbies</h1>
        );
      }
    }

    export default App;

I am getting error from eslint 'Component' is defined but never used. I can not fix this by doing anything so far but digging the web. How can i fix this error? Help would be very much appreciated.

• javascript
• reactjs
• eslint

Share Improve this question Follow asked Apr 23, 2017 at 23:30 ShocKwav3_ShocKwav3_ 1,76066 gold badges2424 silver badges4444 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Try

class App extends Component {

Option 1: You don't need to import {Component} since you extends React.ponent and React is already imported.

Option 2: You can extend your App with Component instead of React.Component

Just remove "import React, { Component } from 'react';" this line and warning will be resolved as this will be not used in functional based Components.

本文标签： javascriptHow to fix quotComponent is defined but never usedquot for eslint in reactStack Overflow