'Header' 已定义但从未使用 no-unused-vars答案

【问题标题】：'Header' is defined but never used no-unused-vars'Header' 已定义但从未使用 no-unused-vars
【发布时间】：2017-06-19 13:05:14
【问题描述】：

我是 reactjs 的新手。我创建了一个应用程序并尝试在 app.js 中加载标头组件。当我尝试加载 Header 组件时，它显示在命令提示符中抛出警告错误为

./src/components/Header.jsx
Line 2 'Header' is defined but never used  no-unused-vars

当我运行应用程序时也会在浏览器中引发错误

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

在 App.js:24 检查您的代码

我在根目录中添加了一个文件“.eslintrc”，并在其中添加了以下代码

{
"parserOptions": {
  "ecmaFeatures": {
      "jsx": true
  }
},
"rules": {

}
}

到目前为止，没有任何效果。谁能帮我解决这个问题。

【问题讨论】：

试试Header?
你想试试“从'./components/Header'导入标题”吗？如果是，我已经只使用 Header。
是的，这就是问题所在：您导入它但从不使用它。将其添加到渲染函数的返回值中。
export default class Header extends React.Component { } 然后您必须将文件导入到要返回值的实际文件中。
@Ozan - 完美运行。非常感谢。

标签： javascript reactjs ecmascript-6 es6-module-loader

【解决方案1】：

请将Header.jsx 重命名为Header.js

请务必将以下代码行放在您的 App.js 之上：

import {Header} from '/src/components/Header.jsx'

一定要把export放在class Header {..}前面

希望有帮助 ;-)

【讨论】：

app.js 已经在 src 文件夹中。我尝试添加如下所示的导出，但没有任何效果相同的错误。 import React, {Component} from 'react' export class Header extends Component { render() { return (
Your header
); } }
问题应该解决了，重装试试。这样就不需要导入像import React, {Component} from 'react'这样的组件，它可能会产生另一个警告。