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

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 的公共(public)目录中，并与 index.html 一起静态提供它，但我更愿意只在客户端需要时才提供文件，而不是仅仅提供一次处理每个文件。如果我可以让一个组件导入 JavaScript 文件并像处理图像一样发送它，那么这正是我正在寻找的。

编辑:抱歉，为了澄清我的意思，Node 是实际提供服务的东西，我想要的是当 React 渲染页面时，它也会运行 JavaScript 代码，就好像它是在 <script> 中编写的一样HTML 页面中的标记。

Answer 1

我已经解决了。本质上，我将想要运行的所有代码放在像 sketch.js 这样的文件中，但将其包围在导出的函数中:

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

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

然后在 app.js 中你可以执行如下操作:

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

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