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

Question

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

12

我希望在我的React应用程序中实现延迟加载，但大部分文件都是JSON格式。当视口宽度小于768px时，其中的一些文件会被加载，但在桌面应用程序中不需要时，我不想加载它们。是否有办法使用React.lazy()加载JSON文件？

我的JSON文件是使用Adobe After Effect扩展程序“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,
    },

将此对象传递给react-lottie中的Lottie组件。

我能将它转换为懒加载吗？还是我的想法有误？

- Freestyle09

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- nickbullock · Accepted Answer

它不是React组件，因此您不应该将其包装在lazy调用中。
基本上，您只需要加载它并处理一个promise。
类似这样：

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

然后在你的render中的某个地方使用它。

更新于2023年：使用hooks

const [data, setData] = useState(null);
  
useEffect(() => {
  import('./data.json').then(data => {
    setData(data);
  });
}, []);