使用 React 动态导入文件

Dynamic import files with React

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

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”,这是行不通的

您可以使用 Dynamic import:

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

我找到了一个解决方案,导入 returns 一个 Promise,然后我可以轻松地将我的数据从文件设置为状态,现在它完美无缺。

const [initial, setInitial] = useState(null);
const [hoverOn, setHoverOn] = useState(null);
const [hoverOff, setHoverOff] = useState(null);

  useEffect(() => {
    import(`./${bird}.json`).then(data => setInitial(data));
    import(`./${bird}_hover_on.json`).then(data => setHoverOn(data));
    import(`./${bird}_hover_off.json`).then(data => setHoverOff(data));
  }, []);