警告：已定义但从未使用过答案

【问题标题】：warning : is defined but never used警告：已定义但从未使用过
【发布时间】：2020-04-17 03:31:14
【问题描述】：

我在 components 文件夹中创建了一个 jsxUses.js 文件，但是当我将它导入 App.js 时，它显示警告：'jsxUses' is defined but never used

//This is App.js file
import React, { Component } from 'react';
import './App.css';
import jsxuses from './components/jsxUses';
class App extends Component{
  render() {
    return (
    <div className="App">
      <jsxuses/>
    </div>
    );
  }
}

export default App;

这是 jsxUses.js 文件

import React from 'react'

const jsxuses = () => {
    return (
        <div>     
            <h1> Hey there!</h1>
        </div>
    );
}
export default jsxuses;

【问题讨论】：

标签： reactjs

【解决方案1】：

React 元素应该是PascalCased。所以应该是

import JsxUses from './components/jsxUses';

...

<JsxUses />

【讨论】：

【解决方案2】：

将您的 jsxUses.js 更改为：

...
const JsxUses = () => {
...
export default JsxUses;

你的 App.js 为：

import JsxUses from './components/jsxUses';
...
<JsxUses />

React 文件结构命名是没有意见的，但 React 元素应该是 PascalCase，以便 React 知道您使用的是函数、类还是 HTMLelementPascalCased。在这里寻找更多：Is there an official style guide or naming convention for React based projects?

希望这会有所帮助！

【讨论】：

【解决方案3】：

其实你应该避免在自定义标签中使用小的后者。

所以你应该这样做

 const JsxUses = () => {
 ...
 }
 export default JsxUses

和

import JsxUses from './components/jsxUses';

或者如果你想这样写 -

const jsxuses = () => {
...
}
export default jsxuses

那么你应该像这样导入它

import { default as JsxUses } from './components/jsxUses'

【讨论】：

【解决方案4】：

好吧，使用import JsxUses from './components/JsxUses'; React component name should be PascalCase.

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。