使用React动态导入文件

Question

我正在使用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”一样导入它，否则这将无法正常工作。

- Freestyle09

---

可能使用JS导入文件，并将内容注入到需要的位置。 - lehm.ro

Answer 1

您可以使用动态导入：

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

- Fraction

---

它只适用于使用“ import * as variable_name” 的形式，不带 * 的形式不起作用。 - Freestyle09

Answer 2

我找到了一个解决方案，导入返回一个 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));
  }, []);

- Freestyle09