我可以使用另一个惰性组件作为<Suspense />后备吗？

Question

我有一个sdk，需要延迟加载组件及其骨架。所以我实现了如下代码：

const lazySkeleton = React.lazy(() => import('@my-sdk/skeleton'));
const lazyComponent = React.lazy(() => import('@my-sdk/component'));

const skeletonWithFallback = <Suspense fallback={null}>
<lazySkeleton />
</Suspense>

<Suspense fallback={skeletonWithFallback}>
    <lazyComponent />
</Suspense>

但是上线后，我偶尔收到错误：Minified React error #130，我不知道出了什么问题以及如何修复它。

有人可以帮我吗？

Answer 1

我查看了您共享的代码片段，发现了导致 Minified React 错误 #130 的问题。问题的根源在于 JSX 中惰性组件的命名和使用方式。

在 JSX 中，组件名称必须以大写字母开头。这是因为 React 将以小写字母开头的组件视为 DOM 标签。因此，当您使用 React.lazy 进行动态导入时，请确保组件变量是大写的。这向 React 发出信号，表明它们是组件，而不是 HTML 元素。

这是经过必要调整的代码修订版本：

import React, { Suspense } from 'react';

// Correctly capitalized component names
const LazySkeleton = React.lazy(() => import('@my-sdk/skeleton'));
const LazyComponent = React.lazy(() => import('@my-sdk/component'));

// Using a component in fallback correctly
const SkeletonWithFallback = (
 <Suspense fallback={<div>Loading Skeleton...</div>}>
   <LazySkeleton />
 </Suspense>
);

function App() {
 return (
   <Suspense fallback={SkeletonWithFallback}>
    <LazyComponent />
   </Suspense>
 );
}

export default App;

在此更新版本中，我将 LazySkeleton 和 LazyComponent 大写，以确保 React 将它们识别为组件。此外，我还调整了后备以使用 SkeletonWithFallback，确保结构符合 React 对延迟加载和悬念的期望。

希望这能为您解决问题！