為什么 HTML 腳本在我的 React 應用程序中不起作用？
[英]Why HTML script doesn't work in my React App?
問題描述
我為 HTML 創建了一個 canvas 腳本，只要我沒有將它添加到 React 應用程序，它就可以很好地工作，
我試圖將它加載到我的 index.html 但它不起作用並且沒有顯示任何內容。
我還猜想我應該把它放到我的 App.js 中，但不知道如何正確包裝它
看起來它甚至可以在片段中編譯，但是我知道為什么它在我的項目中對我不起作用？ 使用反應應用程序時，我可以在我的 html 文件中使用這樣的腳本嗎？
const canvas = document.getElementById("canvas1"); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let particlesArray; let mouse = { x: null, y: null, radius: (canvas.height/80) * (canvas.width/80) } window.addEventListener('mousemove', function(event) { mouse.x = event.x; mouse.y = event.y; } ); class Particle { constructor(x, y, directionX, directionY, size, color){ this.x = x; this.y = y; this.directionX = directionX; this.directionY = directionY; this.size = size; this.color = color; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false ); ctx.fillStyle = '#ddd5d5'; ctx.fill(); } update() { if ( this.x > canvas.width || this.x < 0 ){ this.directionX = - this.directionX; } if ( this.y > canvas.height || this.y < 0 ){ this.directionY = - this.directionY; } let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt (dx * dx + dy * dy) if (distance < mouse.radius + this.size ){ if ( mouse.x < this.x && this.x < canvas.width - this.size * 10 ){ this.x += 10; } if(mouse.x >this.x && this.x > this.size *10){ this.x -=10; } if ( mouse.y < this.y && this.y < canvas.height - this.size * 10 ){ this.y += 10; } if(mouse.y > this.y && this.y > this.size * 10){ this.y -= 10; } } this.x += this.directionX; this.y += this.directionY; this.draw(); } } function init() { particlesArray = []; let numberOfParticles = (canvas.height * canvas.width) / 9000; for (let i = 0; i < numberOfParticles *2; i++){ let size = (Math.random() * 5 ) + 1; let x = (Math.random() * ((innerWidth - size * 2) - (size * 2)) + size * 2); let y = (Math.random() * ((innerHeight - size * 2) - (size * 2)) + size * 2); let directionX = (Math.random() * 5) - 2.5; let directionY = (Math.random() * 5) - 2.5; let color = '#ddd5d5'; particlesArray.push(new Particle(x, y,directionX, directionY, size, color)); } } function connect(){ let opacityValue = 1; for( let a=0; a < particlesArray.length; a++ ){ for(let b = a; b < particlesArray.length; b++){ let distance = (( particlesArray[a].x - particlesArray[b].x) * (particlesArray[a].x - particlesArray[b].x)) + ((particlesArray[a].y - particlesArray[b].y) * (particlesArray[a].y - particlesArray[b].y)); if(distance < (canvas.width/7) * (canvas.height/7)){ opacityValue = 1 - (distance/20000); ctx.strokeStyle='rgba(232, 232, 232,' + opacityValue + ')'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(particlesArray[a].x, particlesArray[a].y); ctx.lineTo(particlesArray[b].x, particlesArray[b].y); ctx.stroke(); } } } } function animate(){ requestAnimationFrame (animate); ctx.clearRect(0, 0, innerWidth, innerHeight) for (let i = 0; i < particlesArray.length; i++) { particlesArray[i].update(); } connect(); } window.addEventListener('resize', function(){ canvas.width = innerWidth; canvas.height = innerHeight; mouse.radius = ((canvas.height/80) * (canvas.height/80)); init(); } ); window.addEventListener('mouseout', function(){ mouse.x = undefined; mouse.x = undefined; } ) init(); animate();
<.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon,ico" /> <meta name="viewport" content="width=device-width. initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="stylesheet" href="../src/App.scss" /> <title>My Website</title> </head> <body> <canvas id="canvas1"></canvas> <script src="../src/components/script.js"></script> <div id="root"></div> </body> </html>
1 個解決方案
解決方案1
0 2021-03-22 15:41:47
檢查這是否適合您： https://codesandbox.io/s/particle-test-ekb0r
我已經嘗試了最簡單的方法，它需要對您的代碼進行最少的更改。 雖然它有效，但請注意，它可能不是最有效的方法。 我剛剛為您提供了一種方法，以便您了解這個想法。 請參考更多來源。
在將js腳本添加到html后的react.js App中，它不起作用
[英]In react.js App after adding js script to html it doesn't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.