Dynami c импорт файлов с помощью React - PullRequest
Новая
       41

Dynami c импорт файлов с помощью React

1 голос
/ 21 января 2020

Я создаю анимацию, используя Adobe After Effects и React Lott ie, и у меня есть много файлов 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', иначе это не работает

Ответы [ 2 ]

1 голос
/ 21 января 2020

Вы можете использовать Dynami c 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();
}, [])
0 голосов
/ 21 января 2020

Я нашел решение, импорт возвращает Обещание, и позже я могу легко установить свои данные из файла в состояние, и теперь оно работает отлично. 

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