Как повторно инициализировать init (); в React, чтобы разрешить повторный запуск файла SVG Adobe Animate при изменении маршрута?
Я создал простой проект реакции, в котором есть многоразовый компонент под названием «крышка». В компоненте «обложка» у меня есть анимированный SVG, который я создал из Adobe Animate и экспортировал в HTML, JS и SVG. Это отлично работает при первой загрузке, поскольку JS находится в файле public / index.html и инициализирован в теге. Однако, когда я меняю маршруты, инициализация не запускается повторно (что правильно, поскольку React не предназначен для перезагрузки страницы), поэтому теперь у меня возникла дилемма: я не могу видеть SVG при изменении маршрута.
См. Пример здесь: https://react-sfj7qx.stackblitz.io
Версия редактора: https://stackblitz.com/edit/react-sfj7qx
Обратите внимание, что функция init () в теге, похоже, не отображается в Stackblitz ...
Спасибо за предложение @JonathanLafleur, я добавил его, но похоже, что функция init () не поддерживается в stackblitz.com, но вы можете увидеть там код: react-sfj7qx.stackblitz.io
Не могли бы вы поделиться редактором? Было бы проще ...
Извините, да @JonathanLafleur, я новичок в мире React
Ответы 1
Поскольку я не слишком хорошо знаком с Adobe Animation, я отредактировал ваш stackblitz, я немного нарушил ваш код, но у вас есть все, что нужно для успеха в этом коде. О чем вы не знали, так это о том, что вам нужно импортировать и экспортировать функцию и переменную между файлами в реакции. Итак, вы увидите, как я это сделал, на примере stackblitz.
Удачи!
Спасибо! Кажется, мне не удается загрузить ссылку с вашими изменениями, код выглядит так же, я что-то упустил?
Омг, похоже, я не сохранил ... Позвольте мне проверить это еще раз -.-
Я не вижу никакой анимации, может, вы расскажете мне об этом поподробнее?
Init (); запускает и загружает анимацию через <script>, добавленный в файл index.js в <head>. Сама анимация взята из «assets / js / svg.js», который также загружается в файл index.js. Анимация также зависит от этой библиотеки '<script src = "code.createjs.com/createjs-2015.11.26.min.js"></…>'. Таким образом, Adobe Animate создает html-файл, который импортирует библиотеку зависимостей, файл svg.js и код инициализации для запуска цикла анимации и некоторых других адаптивных файлов. поведение при выборе размера .... Надеюсь, это имеет смысл
Подскажите пожалуйста, на stackblitz.com