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

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

Answer 1

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

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

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

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

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

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

Answer 2

所以只是一个选项，我们这样做是为了在我们的应用程序上选择性地加载某些脚本。 在构造函数（或者可能是 willMount，玩弄它）上的组件中，创建一个新的脚本标签和 append 该脚本标签到你的应用程序的头部。 这将导致脚本仅在渲染此组件时运行（取决于您调用 function 以添加脚本标记的位置）。 您可能还需要考虑根据您的操作删除脚本标签，但您明白了。

function 看起来像这样：

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