включение p5.js в веб-сайт Next.js (React App) - PullRequest
Новая
       12

включение p5.js в веб-сайт Next.js (React App)

0 голосов
/ 21 мая 2019

У меня есть приложение реакции, которое отлично работает на локальном хосте. Но когда я добавляю его на свой веб-сайт Next.js (React.js), он говорит: «ReferenceError: окно не определено». Я думаю, это потому, что я запускаю P5.js на Node.js, но он может работать только в браузере. Как я могу это исправить?

Мой эскиз P5.js в приложении React 

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;
...