Question

我有一个可在本地主机上完美运行的react应用。但是，当我将其添加到我的Next.js（React.js）网站时，它显示“ ReferenceError：未定义窗口”。我认为这是因为我在Node.js上运行P5.js，但只能在浏览器上运行。我该如何解决？

我在React App中的P5.js草图

import React, { Component } from 'react';
// import logo from './logo.svg';
import p5 from 'p5';


class Sketch extends Component {
  constructor(){
  super()
  this.renderRef = React.createRef()
  this.state = {
    x: 100,
    y: 100
    }
  }

  componentDidMount(){
    this.sketch = new p5( p => {

      p.setup = ()  => {
          p.createCanvas(p.windowWidth, p.windowHeight)
          .parent(this.renderRef.current);
          p.background('white');
          p.strokeWeight(5);

      }
      p.windowResized = () => {
          p.resizeCanvas(p.windowWidth, p.windowHeight )
      }

      p.draw = () => {
          if(p.mouseIsPressed){
              p.stroke(225)
          } else{
              p.stroke(0, 0, 0);
          }
          p.line(p.mouseX , p.mouseY, p.mouseX , p.mouseY);
          p.line(p.mouseX, p.mouseY , p.mouseX, p.mouseY);
          }

        });


    }
render(){

return (
  <div className="App">
    <div ref={this.renderRef}></div>
  </div>
);
}
}

export default Sketch;

Answer 1

将p5导入componentDidMount

componentDidMount(){
    const p5 = require("p5")
    this.sketch = new p5( p => {
    ...

在NextJS中，componentDidMount（）仅在将提供窗口和其他浏览器特定API的客户端上执行。看看这个answer

将p5.js整合到Next.js（React App）网站中

1 个答案: