Question

我正在尝试创建一个包含p5草图的React页面，但是这样做似乎需要我重写标准的JavaScript，我通常会在浏览器中运行它以使其作为React组件。

例如，我想让React将这段代码提供给客户端：

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(0);
}

但是我无法找到一种方法来让React给客户端一个JavaScript文件。相反，我必须创建一个像这样的组件：

export default function(p: p5) {

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

    p.draw = function draw() {
        p.background(0);
    };

}

这似乎微不足道，但是如果我和我的团队可以包括我们已经编写的代码，并且无需重写所有内容就可以在React之外工作，那么事情就会变得简单得多。

解决问题的一种方法是将文件放置在React的公共目录中，并与index.html一起静态地提供它，但是我宁愿只在需要时才将文件提供给客户端而不是一次提供每个文件。如果我可以让一个组件导入JavaScript文件，然后像发送图像一样发送它，那正是我在寻找的东西。

编辑：很抱歉，为了弄清我的意思，Node是真正在服务的东西，我想要的是当React渲染页面时，它也将运行JavaScript代码，就像用{ HTML页面中的{1}}标签。

Answer 1

我已经解决了。本质上，我将要运行的所有代码放在sketch.js之类的文件中，但将其包含在导出的函数中：

export default function Sketch() {
    function setup() {
        createCanvas(600, 600);
    }

    function draw() {
        background(0);
    }
}

然后在app.js中，您可以执行以下操作：

import Sketch from './sketch';
Sketch();

这将在客户端的浏览器中运行该功能中的所有代码。

Answer 2

因此，这只是一个选择，我们可以选择在应用程序中加载某些脚本。在构造函数上的组件中（或可能在willMount上使用它），创建一个新的脚本标签，并将该脚本标签附加到应用程序的头部。这将导致仅在呈现此组件时运行脚本（取决于您调用函数添加脚本标签的位置）。您可能还必须根据自己的工作考虑删除脚本标签，但是您明白了。

函数看起来像这样：

addScriptTag = () => {
  script = document.createElement('script');
  script.src = [url/path of the javascript you want to server from your node server];
  // Or just set the javascript on the script tag by adding innerText and type arts
  document.head.appendChild(script)
}

然后执行以下操作：

constructor() {
  this.addScriptTag();
}

如何在React应用程序中包含纯JavaScript？

2 个答案: