TS中使用React.createElement创建<Suspense>包裹懒加载组件报错问题咨询

核心问题 #

你的.ts文件代码里犯了一个关键错误：使用字符串"Suspense"作为React.createElement的第一个参数，这会让React把它当成原生HTML标签来处理，但原生DOM并没有<Suspense>这个标签，导致React无法识别这是React官方的Suspense组件，自然也就不会处理你传入的fallback属性，最终触发了「没有指定fallback UI」的错误。

而你的.tsx代码里用<React.Suspense>语法，是正确引用了React的Suspense组件，所以能正常工作。

修正后的代码 #

把React.createElement的第一个参数从字符串"Suspense"改成React.Suspense即可：

const LazyComponent = lazy(() => import("path-to-my-lazy-component"));
const SuspenseComponentTS = React.createElement(React.Suspense, { // 这里改成React.Suspense
  fallback: React.createElement("div", null, "Loading")
}, React.createElement(LazyComponent));
render(SuspenseComponentTS); // 现在可以正常运行

为什么打印结构看起来一致？ #

控制台打印的结构只是简化展示，实际上字符串"Suspense"对应的是原生元素节点，而React.Suspense对应的是React组件节点，二者在React内部的处理逻辑完全不同——前者不会处理Suspense相关的 fallback 逻辑，后者才会。

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