时间戳

首页 > 解决方案 > 使用 React 动态导入文件

javascript - 使用 React 动态导入文件

问题描述

我正在使用 Adob​​e After Effects 和 React Lottie 创建动画，并且我有许多由 Bodymovin 扩展生成的 json 文件。我正在以这种方式导入文件：

import * as initial from './white_bird.json';
import * as hoverOn from './white_bird_hover_on.json';
import * as hoverOff from './white_bird_hover_off.json';

但是，当我有例如 6 个看起来相同但仅在导入文件时彼此不同的其他组件时。我怎样才能把这些行写成这样：

const data = {
    initial: import * as initial(`./${some_param}.json`),
  };

请注意，我必须像 '* as' 一样以另一种方式导入它，这是行不通的

标签： javascriptreactjslottiebodymovin

解决方案

您可以使用动态导入：

useEffect(() => {
  async loadData() {
    const data = await import(`./${some_param}.json`);
    setInitial(data);
  }

  loadData();
}, [])

Promise.all如果您有多个请求，请使用：

useEffect(() => {
  async loadData() {
    const [initalData, hoverOnData, hoverOffData] = await Promise.all([
      import(`./${bird}.json`),
      import(`./${bird}_hover_on.json`),
      import(`./${bird}_hover_off.json`)
    ]);

    setInitial(initalData);
    setHoverOn(hoverOnData);
    setHoverOff(hoverOffData);
  }

  loadData();
}, [])

推荐阅读