已声明clientdepositmoney却提示未使用的ESLint报错求助

报错原因 #

React的组件命名规则强制要求自定义组件必须以大写字母开头。你声明的变量clientdepositmoney是小写开头，在JSX中<clientdepositmoney />会被解析为普通HTML标签，而非你定义的React组件。ESLint无法识别这种“无效使用”，因此判定该变量未被实际使用，触发no-unused-vars报错。

解决方法 #

将组件变量名改为大写开头，同时同步修改JSX中的引用：

修改后的代码示例 #

// render - sample page
const ContactUS = Loadable(lazy(() => import('pages/contact-us')));
// 变量名改为大写开头
const ClientDepositMoney = Loadable(lazy(() => import('pages/apps/invoice/deposit')));
const UserGuides = Loadable(lazy(() => import('pages/Documentations/client-guide')));

{
  path: 'invoice',
  children: [
    {
      path: 'deposit',
      // JSX中同步使用大写开头的组件名
      element: <ClientDepositMoney />
    },
    {
      path: 'dashboard',
      element: <AppInvoiceDashboard />
    },
    {
      path: 'create',
      element: <AppInvoiceCreate />
    },
    {
      path: 'details/:id',
      element: <AppInvoiceDetails />
    },
  ]
}

补充说明 #

这是React的核心约定之一：小写开头的元素会被识别为原生DOM标签（如<div>、<p>），只有大写开头的标识符才会被视为自定义React组件。修改后不仅能消除ESLint报错，组件也能正常渲染。

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