如何在响应中正确运行第三方脚本？

问题描述

我需要在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）中正确运行外部脚本，我将不胜感激。预先感谢！

解决方法

将其放在index.html中是很好的方法，也是最合规的方法。

不这样做的唯一原因是：

嵌入脚本是有条件的-它取决于您仅在React / Vue / etc等基础上才知道的内容。应用正在运行。或者您想延迟嵌入。
您正在将诸如Promise之类的内容挂接到脚本的加载中，例如检查Bitrix聊天何时启动并运行
您需要传递仅React / Vue / etc已知的值。 app嵌入脚本（例如api键）

由于这些似乎都不存在，因此我将其保留在index.html中。

我记得有一个名为hazardantSetInnerHTML的属性，您可以在React官方网站上查找。

bitrix javascript reactjs reactjs reactjs reactjs