React组件导入无显示及no-unused-var报错问题求助

你的问题核心是React自定义组件的命名规范：React规定自定义组件必须以大写字母开头，小写开头的标签会被识别为原生HTML元素，导致组件无法渲染，同时ESLint会认为你导入的组件变量未被使用，抛出is defined but never used no-unused-var提示。

具体修改步骤： #

1. 修改nameList.js中的组件名称
   将组件函数名改为大写开头的NameList，确保导出的是这个大写的组件：

import React from 'react';

// 组件名改为大写首字母
function NameList() {
    return (
    <div>
       <h1>Name List</h1>
        <ul>
            <li>Stu1</li>
            <li>Stu2</li>
            <li>Stu3</li>
        </ul>
    </div>
  )
}

export default NameList;

2. 修改App.js中的导入与组件使用
   导入时使用大写的组件名称，并在JSX中用大写标签渲染：

import './App.css';
// 导入大写名称的组件
import NameList from './Components/nameList';

function App() {
  return (
    <div className="App">
      <div className="App">
            {/* 使用大写开头的组件标签 */}
            <NameList/>
        </div>
    </div>
  );
}

export default App;

修改完成后，重新运行项目，浏览器就能正常显示nameList组件的内容，同时ESLint的未使用变量提示也会消失。

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