我有一个vuejs代码库，我想将其转换为reactjs，但是遇到了问题

Question

我有一个vueJS Canvas代码，我想将其转换为reactJS。从以前的question起，我尝试将其转换，但遇到多个错误。 vuejs上的画布工作正常，但是当我尝试将其转换为react im时遇到了许多错误，因此尝试修复了一些问题。伸出援助之手

这是VueJS代码

<template>
  <div id="test" @mouseenter="animate" @mousemove="handleHover($event)">
  </div>
</template>

<script>
  // @mouseenter="animate"
  export default {
    name: 'about',
    data () {
      return {
        container: null,
        canvas: null,
        ctx: null,
        mouseCoords: null,
        particles: [],
        width: 0,
        height: 0,
      }
    },

    mounted () {
      this.container = document.getElementById('test');
      this.canvas = document.createElement('canvas');
      this.container.appendChild(this.canvas);

      this.ctx = this.canvas.getContext("2d");
      this.handleResize();
      window.addEventListener("resize", this.handleResize)
    },

    methods: {
      r (e, t) {
        return Math.hypot(t[0] - e[0], t[1] - e[1])
      },
      i (e, t, o, s) {
        var n = e / s - 1;
        return o * (n * n * (2.2 * n + 1.2) + 1) + t
      },
      animate () {
        var e = this;
        if (!(this.width < 800 * window.devicePixelRatio)) {

          var t = this.particles[this.particles.length - 1]
                  , o = (this.width - t.coords.ref[0]) / 2
                  , s = t.coords.ref[0]
                  , n = (this.height - t.coords.ref[1]) / 2
                  , a = t.coords.ref[1];

          this.ctx.clearRect(o, n, s, a),
             this.particles.forEach(function(t) {
              t.timer += 1;
              var o = Math.max(e.r(t.coords.ref, e.mouseCoords), 150)
                      , s = t.coords.ref[0] + (e.mouseCoords[0] - t.coords.ref[0]) / (o / e.width * 150)
                      , n = t.coords.ref[1] + (e.mouseCoords[1] - t.coords.ref[1]) / (o / e.height * 150)
                      , a = 150 * t.r.ref / o + .5;
              s === t.coords.new[0] && n === t.coords.new[1] || (t.coords.old = t.coords.current.slice(),
                      t.coords.new = [s, n],
                      t.r.old = t.r.current,
                      t.r.new = a,
                      t.timer = 1),
              t.timer < 75 && (t.coords.current[0] = e.i(t.timer, t.coords.old[0], t.coords.new[0] - t.coords.old[0], 75),
                      t.coords.current[1] = e.i(t.timer, t.coords.old[1], t.coords.new[1] - t.coords.old[1], 75),
                      t.r.current = Math.max(e.i(t.timer, t.r.old, t.r.new - t.r.old, 75), 0)),
                      e.ctx.fillStyle = t.fill,
                      e.ctx.beginPath(),
                      e.ctx.arc(t.coords.current[0], t.coords.current[1], t.r.current, 0, 2 * Math.PI),
                      e.ctx.fill()
            }),
          this.loop = requestAnimationFrame(this.animate)
        }
      },
      handleHover (e) {
        this.mouseCoords = [e.clientX * window.devicePixelRatio, e.clientY * window.devicePixelRatio]
      },
      handleResize () {
        this.width = window.innerWidth * window.devicePixelRatio,
                this.height = window.innerHeight * window.devicePixelRatio,
                this.canvas.width = this.width,
                this.canvas.height = this.height,
                this.mouseCoords = [0, this.height];
        var e = Math.max(this.height / 21, 40)
                , t = Math.floor(this.width / (e + 5))
                , o = Math.floor(this.height / (e + 10))
                , V = [2, 2, 6, 6, 5, 5, 3, 3, 0, 0, 2, 2, 0, 0]
                , j = [[2, 0, 0, 2, 1, 0, 0, 3], [1, 0, 2, 2, 0, 0, 2], [2, 2, 2, 2, 3, 0, 1, 0, 0], [1, 0, 2, 2, 0, 0, 2, 2, 0], [2, 0, 1, 2, 2, 0, 2, 0, 1, 2, 2, 1, 0, 0], [0, 2, 2, 0, 3, 1, 2, 1, 2, 0, 1, 2, 2, 0], [1, 2, 1, 1, 0, 2, 2, 0, 0, 1, 2, 1, 0, 1], [2, 1, 1, 0, 0, 0, 2, 2, 1, 1, 1, 1], [2, 0, 2, 0, 0, 0], [0, 0, 0, 2, 0, 0], [0, 2, 0, 0, 0, 0, 0], [0, 0, 0, 2, 0, 0], [0, 0, 0, 0, 2, 0], [0, 0, 0, 2, 0, 0]];
        this.particles = [];
        for (var s = 0; s < o; s += 1) {
          for (var n = 0; n < t; n += 1) {
            var a = Math.round(this.width / 2 - e / 2 * (t - 1) + n * e)
                    , d = Math.round(this.height / 2 - e / 2 * (o - 1) + s * e)
                    , l = "#555555"
                    , r = e / 20;
            if (s > 0 && s < j.length + 1)
              switch (j[s - 1][t - n - V[s - 1] - 1]) {
                case 0:
                  l = "#1DCA7F",
                          r = e / 2.5;
                  break;
                case 1:
                  l = "#047870",
                          r = e / 4;
                  break;
                case 2:
                  l = "#FFFFFF";
                  break;
                case 3:
                  l = "#6898ae",
                          r = e / 2.5
              }
            var i = {
              coords: {
                ref: [a, d],
                current: [a, d],
                new: [a, d],
                old: [a, d]
              },
              r: {
                ref: r,
                current: 0,
                new: r,
                old: 0
              },
              fill: l,
              timer: 1
            };
            this.particles.push(i)
          }
        }
      }

    }
  }
</script>

将vuejs代码库转换为React代码库