Javascript 将p5草图中的值传递给React（使用React-p5-wrapper）

我有一个p5网络摄像头视频预测系统正在工作。目前，我正在尝试将其插入React应用程序，以创建一个更完整的web应用程序

我的问题是，预测现在只在我的p5草图中进行，我希望将预测值传递到React的App.js中，以便进一步构造。有没有办法做到这一点

顺便说一句，我用的是react-p5-wrapper

下面是sketch.js：

import "react-p5-wrapper/node_modules/p5/lib/addons/p5.dom";
import ml5 from 'ml5';

let mobileNet;
let video;
let label='model loading...';

function sketch (p) {

    p.setup = function () {
        p.createCanvas(1000, 1000);
        //imitialize the webcam stream in a object
        video = p.createCapture(p.VIDEO);
        //hide the webcam stream
        video.hide();

        //initialize the mobilenet object with a callback
        mobileNet= ml5.imageClassifier('MobileNet',video,ModelLoaded);
    };

    p.draw = function () {
        p.image(video,0,0);
        p.textSize(16);
        p.fill(255,140,0);
        p.text(label,10,450);
    };
};

function ModelLoaded()
{
    console.log('Model is ready');
    //predicting the image
    mobileNet.predict(result)
}

//callback function to get the results
function result(err,res)
{
    //check for errors
    if(err)
    {
        //log the error if any
        console.error(err)
    }
    else{
        //get the label from the json result
        label = res[0].className;
    //predicting the image again
        mobileNet.predict(result)
    }
}


export default sketch;

而我的App.js目前看起来是这样的：

    import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';
import sketch from './sketch';
import P5Wrapper from 'react-p5-wrapper';



class App extends Component {
  componentDidMount(){

  }
  render() {
    return (
      <div className="App">

        <P5Wrapper sketch={sketch} />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
//从“/logo.svg”导入徽标；
导入“/App.css”；
从“./sketch”导入草图；
从“react-p5-wrapper”导入p5包装器；
类应用程序扩展组件{
componentDidMount（）{
}
render（）{
返回(
);
}
}
导出默认应用程序；

---

感谢您的帮助

我试了一下，想出了一个解决办法。它不是很优雅，但应该可以。我在sketch.js中做了一个非常简单的测试项目，我试图说明访问信息的两种方式。需要注意的是TimeClicked变量和MyCustomRedrawAccountingOneWPropshandler函数

export let timesClicked = 0;
export default function sketch (p) {

    p.setup = function () {
        p.createCanvas(300, 300);
    };

    p.draw = function () {
        p.background(0);
        p.fill(255);
        p.ellipse(p.mouseX, p.mouseY, 100, 100);
    };

    p.myCustomRedrawAccordingToNewPropsHandler = function(newProps){
        if(newProps.getCoords){
            p.sendCoords = newProps.getCoords;
        }
    }

    p.mouseClicked = function() {
        p.sendCoords(p.mouseX, p.mouseY);
        timesClicked++;
    }
};

timesClicked是一个可以导入的变量，它统计鼠标被单击的次数。可以从草图范围内对其进行修改，也可以从其他文件导入

MyCustomRedrawAccountingOneWPropshandler是每当组件收到道具时从react-p5-wrapper库调用的函数，可以在草图中定义

使用此选项，您的App.js文件可以进行如下修改：

import React, { Component } from 'react';
import P5Wrapper from 'react-p5-wrapper';

import sketch from './sketch';

import {timesClicked} from './sketch';

function getCoords(){
    console.log(arguments);
}

class App extends Component {
    componentDidMount(){

    }
    render() {
        return (
            <div className="App">
                <P5Wrapper sketch={sketch} getCoords={getCoords}/>
            </div>
        );
    }
}

export default App;

document.body.onkeyup = function(e){
    if(e.keyCode == 32){
        console.log(timesClicked);
    }
}

import React，{Component}来自'React'；
从“react-p5-wrapper”导入p5包装器；
从“./sketch”导入草图；
从“./sketch”导入{timescacked}；
函数getCoords（）{
log（参数）；
}
类应用程序扩展组件{
componentDidMount（）{
}
render（）{
返回(
);
}
}
导出默认应用程序；
document.body.onkeyup=函数（e）{
如果（e.keyCode==32）{
console.log（单击）；
}
}

运行时，每次单击时，草图都会执行App.js文件中的getCoords（）函数，或者，每次按下空格键时，都会从App.js文件访问timesClicked变量。我认为您可以修改它，以便“发送”或“读取”预测值