如何使用 ReactJS add/mix Vanilla Javascript

Question

我是 React 的新手。目前，我设法将我的简单网站从标准 HTML、CSS、JS 更新为 React、SASS、JSX 等。我遇到的问题是有一个 canvas 标签，其中我运行使用 Paperjs 库在 Vanilla Javascript 中制作的动画，但我不知道如何实现我当前的 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 中，如果可以，怎么做？

任何帮助将不胜感激。

Answer 1

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

只要你把 <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>

如何使用 ReactJS add/mix Vanilla Javascript

How to add/mix Vanilla Javascript with ReactJS

javascript

paperjs

reactjs