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

Question

I want to load a text editor called texture ( https://github.com/substance/texture ) when you startit npm start create a dist folder with an index.js . I have understood that the .js found there create the editor that sees the final user

Now, how can I use them in my react application I tried copying them in my public folder and calling them in a way that I see always used in several places but I only get Hello react

I hope you can help me. Here I show your how I have been doinit

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

You can write this.

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

Answer 2

If you want to add a script then it is better to have that in your index.html rather than polluting your JSX . Just add the path in your index.html file as a normal script tag just before closing body tag:

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

Hope this will help you.