React组件引入后未渲染+ESLint未使用变量报错求助

问题描述 #

我在App.js中引入并使用personAdd组件时遇到两个问题：

• ESLint警告：WARNING in [eslint] rc\App.js Line 2:8: 'personAdd' is defined but never used no-unused-vars
• 项目运行后，HTML中仅显示<personAdd/>标签，组件内容未渲染。修改.eslintrc.json未解决问题，相关代码如下：

App.js #

import React from 'react';
import personAdd from './screens/personAdd';

function App() {
    return (
      <personAdd />
    )
}

export default App;

personAdd.js #

import React from 'react';

class personAdd extends React.Component{
    render(){
        return(
            <div id = "personAdd">
                <h1>Kullanıcı Bilgileri</h1>
                <form>
                    <label htmlFor="id">Ad</label>
                    <input id="id"/>
                    <button>Add</button>
                </form>
            </div>
        )
    }
}

export default personAdd;

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import personAdd from './screens/personadd';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
  <React.StrictMode>
    <personAdd />
  </React.StrictMode>
);*/

解决方案 #

核心原因 #

React的核心规则：自定义组件必须以大写字母开头。小写开头的标识符会被React识别为原生HTML标签，而非自定义组件，这直接导致两个问题：

1. React不会渲染小写开头的组件，仅输出对应的HTML标签
2. ESLint误判组件未被使用（因为React未将其当作组件处理）

修复步骤 #

1. 修改personAdd.js的组件类名和导出
   将组件类名改为首字母大写的PersonAdd，同步导出：

import React from 'react';

class PersonAdd extends React.Component{
    render(){
        return(
            <div id = "personAdd">
                <h1>Kullanıcı Bilgileri</h1>
                <form>
                    <label htmlFor="id">Ad</label>
                    <input id="id"/>
                    <button>Add</button>
                </form>
            </div>
        )
    }
}

export default PersonAdd;

2. 修改App.js中的引入和组件使用
   同步改为大写开头的PersonAdd：

import React from 'react';
import PersonAdd from './screens/personAdd';

function App() {
    return (
      <PersonAdd />
    )
}

export default App;

3. 验证效果

• 重启项目后，组件内容会正常渲染到页面
• ESLint的no-unused-vars警告会自动消失，无需修改.eslintrc.json

内容的提问来源于stack exchange，提问作者I. KA