如何修复React JS未使用变量警告并正确调用自定义组件

你的代码出现'person' is assigned a value but never used警告，且组件无法正常渲染，核心问题是React组件命名规范：

React规定自定义组件必须以大写字母开头，小写开头的标识符会被解析为原生HTML标签，而非你定义的组件。所以你写的<person />被当成了原生标签，根本没调用你定义的const person函数，导致变量未使用的警告，同时组件内容也不会渲染。

解决步骤 #

• 将组件名person改为Person（首字母大写）
• 在App组件中调用<Person />

修改后的完整代码 #

import './App.css';
const Person = () => {
  return (
    <>
    <h1>Name : Shashimal</h1>
    <h1>Age : 26</h1>
    <h1>Gender : Male</h1>
    </>
  )
}
const App = () => {
  return (
    <div className="App">
       <Person />
    </div>
  );
}
export default App;

修改后重新运行，就能正常渲染Person组件的内容，ESLint的警告也会消失。

内容的提问来源于stack exchange，提问作者Shashimal Kawinda Wanninayake