使用CDN链接引入React时ReactDOM.render不生效页面无内容渲染

页面无内容渲染的核心原因是React 18 版本已废弃旧版ReactDOM.render()渲染API，你使用的是React 17及更早版本的渲染语法，和引入的React 18依赖不匹配，脚本执行时会抛出API不存在的运行时错误，直接中断渲染流程。

将index.js中的代码替换为React 18 兼容的写法即可：

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<h1>Hello</h1>)

补充说明 #

• React 18 调整了根节点挂载逻辑：需要先调用ReactDOM.createRoot()传入挂载DOM节点创建React根实例，再通过根实例的render方法传入要渲染的React元素，不再支持直接通过ReactDOM.render()完成挂载。
• 如果你想沿用旧的ReactDOM.render()写法，只需要把HTML中引入的React、ReactDOM CDN版本替换为17.x版本即可，不需要修改JS代码。
• 排查前端脚本问题时，可以优先打开浏览器开发者工具的Console面板，运行时的报错信息会直接定位问题根源，本次问题就能在控制台看到明确的API不兼容报错。

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