通过CDN在HTML页面嵌入React组件失败排查求助

AI 小北

2026-7-7

问题排查与解决

以下是可能导致页面空白的几个常见原因及对应的排查/解决方法：

检查window.my_function的可用性与导出方式
很多打包工具（如Webpack）在导出默认函数时，会将函数挂载到default属性上。如果CDN文件里用的是export default my_function，那你需要调用window.my_function.default(props)而不是直接window.my_function(props)。可以在浏览器控制台执行console.log(window.my_function)，看输出的是函数本身还是包含default属性的对象。
确认my_function返回有效的React元素
调用my_function(props)后，打印返回值console.log(chart)，检查是否是React元素（通常是Object类型，带有$$typeof等React内部标识）。如果返回null、undefined或者非React元素，自然无法渲染。另外要排查函数内部是否有报错，查看控制台的错误信息。
检查Babel standalone是否正确加载
你的脚本用了type='text-babel'，这依赖babel-standalone来在浏览器中编译JSX/ES6语法。如果页面没有引入babel-standalone的CDN，浏览器无法解析脚本内容，会导致代码不执行。需要在头部添加：
```
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
```
适配React 18的渲染API
如果你的React版本是18，ReactDOM.render已经被废弃，继续使用可能导致渲染异常。需要改用createRoot API：
```
const props = {};
const chart = window.my_function(props);
const root = ReactDOM.createRoot(document.getElementById("my-div"));
root.render(chart);
```
修复变量声明的严格模式问题
你的代码里props = {}没有用let/const声明，在严格模式下会抛出未声明变量的错误，导致脚本中断执行。应该改成const props = {}（如果props不需要修改）或者let props = {}。
检查资源加载状态
打开开发者工具的Network标签，确认React、ReactDOM、目标CDN组件、Babel这些资源都成功加载（HTTP状态码为200）。如果有资源加载失败，会导致后续代码无法执行。