React组件未渲染且在VSCode中显示为灰色，如何排查解决？

React 强制要求自定义组件名称必须以大写字母开头，以此区分原生 HTML 标签和用户自定义组件，你的问题就是违反了这个规则。

现象原因说明 #

• 引入行显示灰色：你在 JSX 中使用<counterComponent/>时首字母为小写，React 会将其识别为原生 HTML 标签，不会关联你引入的counterComponent变量，VSCode 判定该引入变量未被使用，因此标记为灰色。
• 组件无法正常渲染：浏览器不存在counterComponent这个原生标签，因此不会渲染对应内容，也不会执行你编写的组件逻辑。

解决步骤 #

1. 调整组件文件命名（符合开发规范，非强制）：将./components/counterComponent.js修改为./components/CounterComponent.js，保持文件名和组件名一致。
2. 修改引入语句，首字母大写：

import CounterComponent from './components/CounterComponent';

3. 修改 JSX 中的组件调用，使用大写开头：

<CounterComponent/>

修正后完整代码 #

import React, { Fragment, useEffect } from 'react';
import CounterComponent from './components/CounterComponent';

function App() {
  return (
    <Fragment>
      <h1>hello</h1>
      <CounterComponent/>
    </Fragment>
  )
};

export default App;

如果修改后仍有问题，可额外检查组件文件是否为默认导出、引入路径是否拼写正确。

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