如何将变量中的值传递给 React 组件

Question

所以我正在使用 https://github.com/and-who/react-p5-wrapper 在 React 中创建 p5.js。

我想知道是否有办法将 p5 Sketch 文件中的值传回 React？例如。我想跟踪在 p5 Sketch 中生成的 label 值并在以后的某个地方使用它。我如何在全球范围内存储该值？

export default function sketch(p5) {

    function modelReady() {
        console.log("Model is ready!!!")
        mobilenet.predict(gotResults)
    }

    function gotResults(error, results) {
        if (error) {
            console.error(error)
        } else {
            **label = results[0].label** <-- This badboy
            mobilenet.predict(gotResults)
        }
    }

我正在构建的东西 https://codesandbox.io/s/dark-wave-dgrlg（它是一个机器学习摄像头，可以检测摄像头看到的内容）你可以看到 ~~React 中的标签没有更新，但它是仅更新 p5 草图中的标签。~~

我的解决方法： 我在我的代码中做了类似 setInterval(setLabel, 0) 的事情，但这似乎不是正确的模式？有没有更好的方法？

解法： https://codesandbox.io/s/jovial-gates-usew3

Answer 1

How can I store that value globally?

对于全局状态，使用 redux store。您可以分派一个操作来存储此标签。

注意，如README、

中所述

myCustomRedrawAccordingToNewPropsHandler function is called if Properties of the wrapper component are changing

所以我要明确共享草图对象。此重绘函数将用于访问实际分派到 redux store 的父函数。

// sketch
export default function sketch(p) {
  // use custom redraw handler
  p.myCustomRedrawAccordingToNewPropsHandler = function (props) {
    // TODO: replace with actual label
    // get value out
    setInterval(() => props.gotResults(null, "done"), 5000);
  };
}

// action
const key = "p5";
const SAVE_LABEL = `${key}/SAVE_LABEL`;

// action creator
function saveLabel(label) {
  return {
    type: SAVE_LABEL,
    payload: {
      label
    }
  }
}

export default function Sketch(props) {
  // dispatch inside component
  const dispatch = useDispatch()

  function gotResults(error, label) {
    if (error) {
      console.error(error);
      return;
    }

    dispatch(saveLabel(label));
  }

  return (
    <P5Wrapper
      sketch={sketch}
      gotResults={gotResults}
    />
  );
}

// TODO: add reducer

示例沙箱：https://codesandbox.io/s/pedantic-breeze-54mde

Answer 2

@josephD 我绞尽脑汁想了解这在我的代码中是如何工作的。你能告诉我这是如何工作的吗？谢谢！

基于此文件，https://codesandbox.io/s/jovial-gates-usew3

所以在我的 Sketch.tsx 文件中，我有这行命令 props.setLabel(label) 这是在动态创建 React prop 吗？我们称它为setLabel并给它赋值label?

  p5.myCustomRedrawAccordingToNewPropsHandler = function (props) {
    gotResults = (error, results) => {
        if (error) {
            console.error(error)
        } else {
            label = results[0].label
            **props.setLabel(label)** <-- this bad boy
            mobilenet.predict(gotResults)
        }
    }
}

然后在我们的 App.tsx 文件中，似乎我们可以传递我们从 [=60 创建的 setLabel prop =]进去了吗？我想使用 React.useState 我需要输入类似 setLabel(value) 的内容吗？我们不需要在 App.tsx 文件中的任何地方调用 setLabel(value)?

    const [label, setLabel] = React.useState("...")

return (
    <>
        <Frame>{label}</Frame>
        <P5Wrapper sketch={sketch} setLabel={setLabel} /> <-- How this magic happen?
    </>
)

useState 中的 setLabel 现在是 P5Wrapper 中的一个道具？它从 Sketch.tsx 中获取 setLabel 作为属性？

我对属性和道具的定义： 属性={prop}

const [label, setLabel] = React.useState("...")

setLabel={setLabel} /> <-- setLabel作为道具？ setLabel 来自 Sketch.tsx 作为属性？

如何将变量中的值传递给 React 组件

How can I pass a value in a variable to a React component

javascript

reactjs

p5.js