react 中的 p5 js：期望赋值或函数调用，而是看到表达式 no-unused-expressions

Question

当运行这个 script on p5 js's sandbox 它工作得很好当尝试在 React 中使用它时，我得到：Expected an assignment or function call and instead saw an expression no-unused-expressions

我查看了之前的问题，发现大部分问题都是由于没有使用括号或分号而导致的语法问题。我做了所有好的语法实践，但没有让它发挥作用

这是我在 react 上的 sketch code :

export default function sketch(p){
      var t;
      var canvas ; 
      var w = window.innerWidth;
      var h = window.innerHeight;  
      var x , y , d , T;
      p.setup=()=>{

        // put setup code here
        t=0; 
        
      }
      p.draw = () => {
        canvas =p.createCanvas(w-50, h-50);
        canvas.style('display','block');
        
        var x_center = (p.windowWidth - w) / 2;
        var y_center = (p.windowHeight - h) / 2;
        canvas.position(x_center, y_center);
        
       t += .01;
        
        for (var j = 2; x = y = j--;){
          for (var i = w; d = p.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6){
               j ? i - w / 2 || ( T = p.translate)(-x, -y) : p.push() + T(x + w / 2, y + w / 2) + p.rotate(d + Math.PI / 4) + p.line(-600, 100, 600, 100) + p.pop(i % 100 || p.scale(80));
          
          }  
        }
      }

      window.onresize = function() {
        // assigns new values for width and height variables
        w = window.innerWidth;
        h = window.innerHeight;  
        canvas.size(w,h);
      }
}

Answer 1

每次都写出p.translate(x, y)而不是使用T = p.translate然后T(x, y)，例如

export default function sketch(p){
    let t;
    let canvas ; 
    let w = window.innerWidth;
    let h = window.innerHeight;  
    let x ; let y ; let d ; 
    p.setup=()=>{

        canvas =p.createCanvas(w-50, h-50);
        canvas.style('display','block');
      // put setup code here
      t=0; 
      const x_center = (p.windowWidth - w) / 2;
      const y_center = (p.windowHeight - h) / 2;
      canvas.position(x_center, y_center);
      
    }
    p.draw = () => {
      p.background(255);
      t += .0008;
      
      for (let j = 2; x = y = j--;){  // j >0
        for (let i = w-200; d = p.noise(t - i / 99) * 3, i--; x += Math.cos(d) * 6, y += Math.sin(d) * 6, i>0){  // i >0
             j ? i - w / 2 || p.translate(-x, -y) : p.push() + p.translate(x + w / 2, y + w / 2) + p.rotate(d + Math.PI / 4) + p.line(-600, 100, 600, 100) + p.pop(i % 100 || p.scale(80));
        }  
      }
    }
}

您的初始版本不起作用，因为在实例模式下 translate() 是属于 p 的方法，因此想要访问 p 的其他方法或字段。但是，您在此过程中定义的函数 T 不属于 p，因此 not 无法访问任何 this.foo。

react 中的 p5 js：期望赋值或函数调用，而是看到表达式 no-unused-expressions

p5 js in react : Expected an assignment or function call and instead saw an expression no-unused-expressions

reactjs

p5.js