使用React动态导入文件

自由式09

我正在使用Adobe 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”一样将其导入

分数

您可以使用动态导入：

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();
}, [])

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。