admin管理员组

文章数量:1430151

I'm new to React. At the moment I manage to update my simple website from standard HTML, CSS, JS to React, SASS, JSX and so on. The problem I have is that there is a canvas tag where I run an animation made in Vanilla Javascript using the Paperjs library, but I have not idea on how to implement my current JS animation to my React project.

This is what I have in my body tag:

<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>

This is just a simple background animation, there is no interaction with DOM elements.

I wander if it would be possible to implement my current code in to React as is, and if so, how?

Any help will be much appreciated.

I'm new to React. At the moment I manage to update my simple website from standard HTML, CSS, JS to React, SASS, JSX and so on. The problem I have is that there is a canvas tag where I run an animation made in Vanilla Javascript using the Paperjs library, but I have not idea on how to implement my current JS animation to my React project.

This is what I have in my body tag:

<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>

This is just a simple background animation, there is no interaction with DOM elements.

I wander if it would be possible to implement my current code in to React as is, and if so, how?

Any help will be much appreciated.

  • javascript
  • reactjs
  • paperjs
Share Improve this question asked May 30, 2019 at 19:33 Ricardo SanchezRicardo Sanchez 5,19712 gold badges61 silver badges95 bronze badges 3
  • you want to render <canvas> inside a react ponent? – stackoverflow Commented May 30, 2019 at 19:40
  • @BarbuBarbu yes I do, my idea is to have different JS animations to render on the canvas tag, so I can allow the user to select which animation to see/run – Ricardo Sanchez Commented May 30, 2019 at 20:39
  • then that would be a bit more plex to do it, you'll have to wrap all the logic inside ponent did mount and there, when your animation needs to change, you'd have to load all the js related libraries dynamically and bind them to the <canvas> ref element...not sure how much you've understood, but I hope I gave you an ideea – stackoverflow Commented May 31, 2019 at 7:20
Add a ment  | 

1 Answer 1

Reset to default 4

React needs to be in full control of its DOM branch (usually a <div id="root"/> under <body>).

As long as you put the <canvas /> outside of the React's DOM branch, you won't have any problem with it.

Example:

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

本文标签： How to addmix Vanilla Javascript with ReactJSStack Overflow

版权声明：本文标题：How to addmix Vanilla Javascript with ReactJS - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745506357a2661263.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。