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

Question

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

我的 JSON 文件是使用名为 'Bodymovin' 的 Adobe After Effect 扩展生成的，稍后我将像这样导入此文件：

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 组件

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

Answer 1

它不是 React 组件，所以你不应该用 lazy 调用来包装它。
基本上你只需要加载它并处理一个承诺。
类似于：

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

然后在您的 render

中的某处使用它

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

How to import Json file with React lazy loading?

json

reactjs

lazy-loading

lottie