如何导入Json文件以响应延迟加载？
提问于 2019-11-29 05:56:42
我想在我的React应用程序中实现延迟加载，但是大多数文件都是JSON。当视口宽度小于768 of时，它们中很少有加载，当不需要时，我不想将它们加载到桌面应用程序中。有任何方法可以用React.lazy()加载JSON文件吗？
我的JSON文件是用扩展名为：'Bodymovin‘生成的，稍后我将像这样导入这个文件：
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,
},并将此对象从Lottie中传递到react-lottie组件中。
我能把它转换成延迟加载吗?或者我想错了？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-29 06:33:03
它不是React组件，所以您不应该用lazy调用包装它。
基本上，你只需要加载它，并履行一个承诺。
类似于：
componentDidMount() {
import('./tree-medium.json').then(background => {
this.setState({ background })
})
}然后在render中的某个地方使用它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59106159
复制相关文章
腾讯云开发者
