如何将外部 files.js 插入到 React 组件中？

Question

当您启动时，我想加载一个名为 texture（ https://github.com/substance/texture ）的文本编辑器npm start创建一个带有index.js的dist文件夹。 我知道在那里找到的 .js 创建了可以看到最终用户的编辑器

现在，我如何在我的 React 应用程序中使用它们我尝试将它们复制到我的公共文件夹中，并以我在多个地方看到的始终使用的方式调用它们，但我只得到Hello react

我希望你能帮助我。 在这里，我向你展示我是如何做的

import React,{Component} from "react";

class Texture extends Component {

    componentDidMount() {
        const substance = document.createElement("script");
        substance.async = true;
        substance.src = "../../../public/lib/substance/substance.js";
        substance.onload = () => this.scriptLoaded();
        this.div.appendChild(substance);

        const katex = document.createElement("script");
        katex.async = true;
        katex.src = "../../../public/lib/katex/katex.js";
        katex.onload = () => this.scriptLoaded();
        this.div.appendChild(katex);

        const texture = document.createElement("script");
        texture.async = true;
        texture.src = "../../../public/texture.js";
        texture.onload = () => this.scriptLoaded();
        this.div.appendChild(texture);

        const texturePluginJats = document.createElement("script");
        texturePluginJats.async = true;
        texturePluginJats.src = "../../../public/plugins/texture-plugin-jats/texture-plugin-jats.js";
        texturePluginJats.onload = () => this.scriptLoaded();
        this.div.appendChild(texturePluginJats);

        const vfs = document.createElement("script");
        vfs.async = true;
        vfs.src = "../../../public/demo/vfs.js";
        vfs.onload = () => this.scriptLoaded();
        this.div.appendChild(vfs);

        const demo = document.createElement("script");
        demo.async = true;
        demo.src = "../../../public/demo/demo.js";
        demo.onload = () => this.scriptLoaded();
        this.div.appendChild(demo);
      }

      render() {
        return (
          <div className="App" ref={el => (this.div = el)}>
            <h1>Hello react</h1>
            {/* Script is inserted here */}
          </div>
        );
      }
    }

export default Texture

Answer 1

你可以写这个。

render() {
    return (
      <div className="App">
        <h1>Hello react</h1>
        <script src="/path/to/js" />
      </div>
    );
  }

Answer 2

如果你想添加一个脚本，那么最好将它放在你的index.html而不是污染你的JSX 。 只需在关闭body标记之前将index.html文件中的路径添加为普通脚本标记：

<script src="/path/to/file.js"></script>

希望这会帮助你。