在App.js中引入React自定义组件后页面显示空白是什么原因？

React 强制要求自定义组件的名称必须以大写字母开头，你当前定义的组件名mainReg首字母为小写，React会将其识别为原生HTML标签，而非你写的自定义组件，没有对应逻辑的原生标签不会渲染任何内容，最终导致页面显示空白，多数情况下控制台不会抛出明显报错，仅会在部分规则校验较严的项目中给出警告。

• 第一步修改组件文件内的组件定义、导出名称为大写开头的MainReg：

// mainReg.js 修改后代码
import React from 'react';

const MainReg = () =>{
    return(
        <div>
            <h2>Hey react!</h2>
        </div>
    );
}

export default MainReg;

• 第二步修改App.js内的组件导入、使用代码，保持名称首字母大写：

import logo from './logo.svg';
import './App.css';
import MainReg from './mainReg';


function App() {
  return (
    <div className="App">
      <MainReg/>
    </div>
  );
}

export default App;

修改完成后重启开发服务即可正常渲染组件内容。

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