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

Question

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

例如，我想让 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 文件并像处理图像一样发送它，那正是我正在寻找的。​​p>

编辑：抱歉，澄清一下我的意思，Node 是实际服务的东西，我想要的是当 React 呈现页面时，它也会运行 JavaScript 代码，就好像它是用 @ 编写的一样HTML 页面中的 987654324@ 标记。

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();
}