为什么 HTML 脚本在我的 React 应用程序中不起作用？答案

【问题标题】：Why HTML script doesn't work in my React App?为什么 HTML 脚本在我的 React 应用程序中不起作用？
【发布时间】：2021-06-19 04:35:31
【问题描述】：

我已经为 HTML 创建了一个画布脚本，只要我没有将它添加到 React 应用程序，它就可以很好地工作，

我尝试将它加载到我的 index.html 中，但它不起作用并且没有显示任何内容。

我也猜想我应该把它放到我的 App.js 中，但不知道如何正确包装它

看起来它甚至可以在 sn-p 中编译，但我想知道为什么它在我的项目中对我不起作用？使用 react 应用时，我可以在我的 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>

【问题讨论】：

这看起来像这里的工作代码。你能添加什么不起作用吗？你提到的反应。
是的，它在这里有效，我认为它有效，因为“root”中没有任何内容，因此 HTML 没有任何内容可显示。当我在浏览器中打开整个项目时，它会显示所有内容，但不显示此脚本。
我没有“它显示所有内容，但不显示此脚本”部分。你能提供一个截图来更好地理解你的问题吗？
那么您基本上想要的是迁移此代码以做出反应吗？
是的，我想把这段代码作为我的页面背景，但是这个功能没有出现。

标签： javascript html reactjs dom

【解决方案1】：

检查这是否适合您： https://codesandbox.io/s/particle-test-ekb0r

我已经尝试了最简单的方法，该方法需要对您的代码进行最少的更改。虽然它有效，但请注意，它可能不是最有效的方法。我刚刚为您提供了一种方法，以便您了解这个想法。请参考更多来源。

【讨论】：

它对我有用，但现在需要清理一下。感谢 m8 祝你有美好的一天 :)