如何在反應中正確運行第三方腳本？

Question

我需要在 React 應用程序中添加用 bitrix 制作的支持聊天 - 這是一個通常添加到 index.html 文件的腳本。 示例腳本：

   <script>
        (function(w,d,u){
                var s=d.createElement('script');s.async=true;s.src=u+'?'+(Date.now()/60000|0);
                var h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);
        })(window,document,'https://someurl.js');
</script>

目前，我已經實現了如下連接：用腳本創建了一個組件

import React, { Component } from 'react'

export default class Script extends Component {
  componentDidMount() {
    const s = document.createElement('script')
    // s.type = 'text/javascript'
    s.async = true
    s.innerHTML = "document.write('This is output by document.write()!')"
    s.src =
      'https://someurl.js' +
      '?' +
      ((Date.now() / 60000) | 0)
    this.instance.appendChild(s)
    const h = document.getElementsByTagName('script')[0]
    h.parentNode.insertBefore(s, h)
  }

  render() {
    return <div ref={(el) => (this.instance = el)} />
  }
}

並將其連接到應用程序的根目錄

import Script from './Script '
    const App = () => {
       return(
          <>
            <App />
            <Script />
          </>
       )
    }

它有效，但我認為此解決方案不是最正確的解決方案。 如果有人可以幫助在反應式應用程序（react、vue）中正確運行外部腳本，我將不勝感激。 提前致謝！！

Answer 1

將它放在 index.html 中很好，也是最合規的方法。

不這樣做的唯一原因是：

1. 嵌入腳本是有條件的——這取決於你只知道 React/Vue/etc. 應用程序正在運行。 或者您想延遲嵌入。
2. 您正在將 Promise 之類的東西掛鈎到腳本的加載中，例如檢查 Bitrix 聊天何時啟動並運行
3. 你需要傳遞只有 React/Vue/etc 知道的值。 app 嵌入腳本（例如 api 密鑰）

由於這些似乎都不是這里的情況，我會將它保留在 index.html 中。

Answer 2

我記得有一個叫做dangerousSetInnerHTML 的屬性，你可以在React 官方網站上查找。