在 ReactJs web 項目中包含 external.js 文件

Question

由於 external.js 文件 url 屬於客戶，所以我不能分享，我需要包含外部 js 文件，並從該外部 js 文件中調用 function。 我已經看到了一些解決方案，例如：

const script = document.createElement('script');
script.src = url;   //(This is external js url)
script.async = true;
document.body.appendChild(script);

但這對我不起作用，或者我可能不知道它是如何工作的

假設這是外部示例代碼：

本地調用的示例代碼，如果我們手動下載文件並導入

  let conn = demo("url", false)
  conn.login("username", "myPassword")

包含在 reactjs 中后如何執行上述相同的調用

 export default function demo (end, sec) {  
    const login = (user, password) => {
            console.log(" sending login message")

    }
   
    const logout = async (user) => {
                    console.log(" sending logout message")
    }


    /*
     * Expose these methods to the client
     */
    return { login, logout }
}

Answer 1

您將需要 append 您的代碼片段在一個生命周期方法（如componentDidMount ）中，以便React可以在您安裝組件時安裝（或加載）它。 完成后，您可以調用自定義方法。

如果您使用 class 組件：

class MyComponent extends Component {

  componentDidMount() {
    const script = document.createElement('script');
    script.src = url;   //(This is external js url)
    script.async = true;
    document.body.appendChild(script);
  }

  render() { 
    return null;
  }
}

或者，如果您使用帶有鈎子的功能組件

const MyComponent = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = url;   //(This is external js url)
    script.async = true;
    document.body.appendChild(script);
  }, [])
}

Answer 2

要添加外部 js，有兩個選項

1. 創建自定義腳本並異步添加 js 文件。
2. 使用第三方節點模塊

以下是腳本-

const addExternalJs = () => {
   const script = document.createElement("script");
  script.src = "/<path1>/<path2>/yourJSFile.js";
  script.async = true;
  script.onload = () => this.scriptLoaded();

  document.body.appendChild(script);
}

1. 基於功能的組件

   useEffect(() => { addExternalJs(); }, []);

2. 基於 Class 的組件

   componentDidMount() { addExternalJs(); }