相关疑难解决方法(0)

我有一个相对简单的问题,试图将内联脚本添加到React组件.到目前为止我所拥有的:

'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            <DocumentTitle title="People">
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>

                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

我也尝试过:

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

这两种方法似乎都没有执行所需的脚本.我猜这是一件我想念的简单事.有人可以帮忙吗？

PS:忽略foobar,我有一个真正的ID实际上在使用,我不想分享.

我正在尝试创建一个包含 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 代码，就好像它是在<script>HTML 页面的标签中编写的一样。