如何在ReactJS中添加/混合Vanilla Javascript

里卡多·桑切斯（Ricardo Sanchez）

我是React的新手。目前，我设法将我的简单网站从标准HTML，CSS，JS更新为React，SASS，JSX等。我遇到的问题是，有一个canvas标签，在其中使用Paperjs库运行用Vanilla Javascript制作的动画，但是我不知道如何将当前的JS动画实现到我的React项目。

这是我的身体标签中的内容：

<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中实现我的当前代码，如果可以，怎么办？

任何帮助都感激不尽。

错误名称

React需要完全控制其DOM分支（通常是<div id="root"/>under <body>）。

只要将它放在<canvas />React的DOM分支的外部，就不会有任何问题。

例：

<html>
  <head>...</head>
  <body>
    <div id="root"></div> <!-- React branch -->
    <canvas id="paperjs-canvas" resize></canvas> <!-- Here you are in control -->
    ...
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。