Как добавить/смешать ванильный Javascript с ReactJS
Я новичок в React. На данный момент мне удается обновить свой простой веб-сайт со стандартного HTML, CSS, JS на React, SASS, JSX и так далее. У меня проблема в том, что есть тег canvas, где я запускаю анимацию, созданную в Vanilla Javascript с использованием библиотеки Paperjs, но я не знаю, как реализовать мою текущую JS-анимацию в моем проекте React.
Это то, что у меня есть в моем теге body:
<canvas id='paperjs-canvas' resize></canvas>
<script src = "js/libs/paper-full.min.js"></script>
<script src = "js/jellies/jelly.min.js"></script>
<script src = "js/jellies/tentacle.min.js"></script>
<script src = "js/jellies/paper-jellies.min.js"></script>
Это просто простая фоновая анимация, никакого взаимодействия с DOM-элементами нет.
Меня интересует, можно ли будет реализовать мой текущий код в React как есть, и если да, то как?
Любая помощь будет высоко ценится.
@BarbuBarbu да, да, моя идея состоит в том, чтобы разные анимации JS отображались на теге холста, чтобы я мог позволить пользователю выбирать, какую анимацию просматривать/запускать
тогда это будет немного сложнее сделать, вам придется обернуть всю логику внутри компонента, который был смонтирован, и там, когда ваша анимация должна измениться, вам придется динамически загружать все библиотеки, связанные с js, и связывать их к элементу <canvas> ref... не уверен, насколько вы поняли, но я надеюсь, что дал вам идею
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
React должен полностью контролировать свою ветку DOM (обычно <div id = "root"/> под <body>).
Пока вы помещаете <canvas /> вне ветки DOM React, у вас не будет с этим проблем.
Пример:
<html>
<head>...</head>
<body>
<div id = "root"></div> <!-- React branch -->
<canvas id = "paperjs-canvas" resize></canvas> <!-- Here you are in control -->
...
</body>
</html>
Нашел хорошее решение, используя github.com/nfl/react-helmethttps://github.com/nfl/react-helmet
вы хотите отображать <canvas> внутри компонента реакции?