如何在React应用程序中运行用户输入P5.JS代码？

Question

我对P5.JS非常熟悉，但对Web开发的全新。我一直熟悉React，并且正在努力构建一个React应用程序，该应用程序包括一个浏览器P5 IDE。我正在使用ACE在无问题的React组件中构建代码编辑器，但是我不确定如何使用该代码运行P5草图。这是我到目前为止的代码：

import React from 'react';
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-chrome"
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/webpack-resolver";

import p5 from 'p5';

import './App.css';


let inputCode='';

function onChange(newValue) {
  console.log(newValue);
  inputCode = newValue;
}

export class Editor extends React.Component {

  render() {
    return (
      <div className="container">
        <div className="title-container">
          <h1>p5 Code Editor</h1>
          <button>Run</button>
        </div>
        <AceEditor
          mode="javascript"
          width="100%"
          theme="chrome"
          onChange={onChange}
          name="UNIQUE_ID_OF_DIV"
          editorProps={{ $blockScrolling: true }}
        />
      </div>
    );
  }
}

export class Sketch extends React.Component {

  render() {
    return <div class="sketch-container" id="sketch-container"></div>
  }

}

此时，我在此时所做的一切效果除外，代码编辑器将输入代码存储到字符串中。我知道有一些方法可以评估Stringified代码（eval（），new函数（）），但是在P5中工作似乎使其变得更加复杂。我能在这种情况下发现使用P5的唯一示例看起来像：

const s = (sketch) => {

  let x = 250;
  let y = 250;

  sketch.setup = () {
    sketch.createCanvas(500, 500);
  }
  sketch.draw = () {
    sketch.background(0);
    sketch.rect(x, y, 100, 100);
  }
  
}

let myp5 = new p5(s);

但是，如果用户在文本编辑器中的p5.js中进行编码，则他们不必使用Sketch.Method.Method（）语法（）语法使用功能。因此，是否可以将用P5.Js写入的输入代码转换为React应用中可读的内容？如果可以的话，如何在特定DIV中查看结果？

Answer 1

您可以设置用P5.JS编写的指定文件并写入它，然后在按钮上按钮或您确定的任何触发器。请记住，如果您想在特定的DIV中运行它，则需要将代码添加到设置功能中，以识别该div。