如何在 React 應用程序中運行用戶輸入的 p5.js 代碼？

Question

我對 p5.js 非常熟悉，但對 web 開發是全新的。 我已經熟悉 React，並且正在構建一個包含瀏覽器內 p5 IDE 的 React 應用程序。我正在使用 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>
  }

}

在這一點上，除了呈現代碼編輯器之外，我所能做的就是將輸入代碼存儲到一個字符串中。 我知道有評估字符串化代碼的方法（eval()、new Function()），但在 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 進行編碼，那么只要他們想使用 function，他們就不必使用 sketch.method() 語法。那么有沒有一種方法可以翻譯用 p5 編寫的輸入代碼。 js 轉換成 React 應用程序中可讀的東西？ 如果可以，您如何查看特定 div 中的結果？

Answer 1

您可以設置一個用 p5.js 編寫的指定文件並寫入它，然后在按下按鈕或您決定的任何觸發器上運行該代碼，而不是將 p5 代碼變成一個實際的 React 組件。 請記住，如果您想在特定的 div 中運行它，您需要將代碼添加到您的設置 function 中以識別該 div。