React中导入JSX组件无法使用，ESLint提示变量定义未使用如何解决？

问题根因 #

1. 自定义组件命名违反React规范
   React要求所有自定义组件必须以大写字母开头，小写开头的标签会被识别为原生HTML标签，无法关联到你导入的自定义组件。ESLint抛出'log' is defined but never used报错的原因就是ESLint不认为<log />是对导入的log变量的合法使用。
2. Hook拼写错误
   log组件中导入的UseState拼写错误，React内置状态Hook为小写开头的useState，大写开头会触发运行时错误。

修复步骤 #

• 全链路调整组件命名为大写开头，将log重命名为Log，同时建议将auth、signInForm、signUpForm等所有自定义组件统一遵循大写开头规范
• 修正useState的导入拼写

修复后auth.js代码 #

import React from 'react';
import Log from './../components/log/';

const Auth = () => {
    return (
        <div className='authPage'>
            <Log />
        </div>
    );
};

export default Auth;

修复后log目录index.js代码 #

import React, { useState } from 'react';
import SignInForm from './signInForm';
import SignUpForm from './signUpForm';

const Log = () => {
// 原有组件逻辑
};

export default Log;

补充说明 #

React自定义组件大写开头属于框架隐性规则，没有强制语法校验，很容易在开发初期踩坑。路径、导出规则确认无误的前提下，优先排查命名大小写即可快速定位问题。

内容的提问来源于stack exchange，提问作者Kenyuki