React 18应用无法渲染Header组件，本地持续加载求助

核心问题 #

你的Header组件存在无限递归渲染的问题，这是页面一直加载的根本原因，和React 18的变动无关。

在Header.jsx中，你定义的组件名为Header，但组件返回值里又使用了<Header>标签——这会让组件不断调用自身，形成无限循环，最终导致页面卡死加载。

修正方案 #

将组件内部的<Header>改为原生HTML的<header>标签（React中大写开头代表自定义组件，小写对应原生HTML元素）：

// Header.jsx
import React from 'react'

function Header() {
  return (
    <header className='container'>
        <h2>React App</h2>
    </header>  
  )
}

export default Header

其他代码验证 #

你的App.js和index.js代码都是正确的，React 18使用createRoot的渲染方式没有问题，修正Header组件后页面即可正常渲染。

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