如何使用 React 延迟加载导入 Json 文件?

Posted

技术标签:

【中文标题】如何使用 React 延迟加载导入 Json 文件?【英文标题】:How to import Json file with React lazy loading? 【发布时间】:2020-03-25 03:10:19 【问题描述】:

我想在我的 React 应用程序中实现延迟加载,但大多数文件都是 JSON。当视口宽度小于例如768px,我不想在不需要时将它们加载到桌面应用程序中。有没有办法用 React.lazy() 加载 JSON 文件?

我的 JSON 文件是使用名为“Bodymovin”的 Adob​​e After Effects 扩展生成的,后来我正在导入这个文件,如下所示:

import * as background from './background.json';
import * as backgroundLarge from './background-large.json';
import * as backgroundMedium from './background-medium.json';
import * as backgroundMobile from './background-mobile.json';
import * as backgroundSmallMobile from './background-smallMobile.json';
import * as tree from './tree.json';
import * as treeLarge from './tree-large.json';
import * as treeMedium from './tree-medium.json';
import * as treeMobile from './tree-mobile.json';
import * as treeSmallMobile from './tree-smallMobile.json';

我试图像使用默认导出的任何其他组件一样正常加载它,但它不起作用。

const treeMedium = lazy(() => import('./tree-medium.json'));

当我正常导入 JSON 时,我稍后会像这样使用它:

backgroundOptions: 
      loop: true,
      autoplay: true,
      animationData: background.default,
    ,

并将这个对象从react-lottie传递给Lottie组件

我可以将其转换为延迟加载还是我想错了?

【问题讨论】:

【参考方案1】:

它不是一个 React 组件,所以你不应该用 lazy 调用来包装它。 基本上你只需要加载它并处理一个承诺。 比如:

componentDidMount() 
 import('./tree-medium.json').then(background => 
  this.setState( background )
 )

然后在你的render某处使用它

【讨论】:

以上是关于如何使用 React 延迟加载导入 Json 文件?的主要内容,如果未能解决你的问题,请参考以下文章

如何将本地 JSON 导入 React ES6 [重复]

你能解构延迟加载的 React 组件吗?

如何从 React 中的 JSON 文件导入数据?

如何将 react-spring 动画组件添加到 React 延迟加载?

如何使用React.lazy和Suspense进行组件延迟加载

将 JSON 文件加载到 React 组件状态 | Wepback2