javascript 使用React动态导入文件

tf7tbtn2 于 2022-12-02 发布在 Java

关注(0)|答案(2)|浏览(156)

我正在创建一个动画使用Adobe后效应和ReactLottie，我有许多由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'一样导入它，但另一种方式不起作用*

JavaScript

来源：https://stackoverflow.com/questions/59838341/dynamic-import-files-with-react

2条答案

按热度按时间

2izufjch1#

您可以使用动态导入：

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

赞(0）回复(0）举报 2022-12-02

nzk0hqpo2#

我找到了一个解决方案，导入返回一个承诺，后来我可以很容易地设置我的数据从文件到状态，现在它的工作完美。

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

赞(0）回复(0）举报 2022-12-02

我来回答

javascript 使用React动态导入文件

2条答案

相关问题

热门标签

最新问答