Javascript 如何在react中正确运行第三方脚本？

我需要在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>

（功能（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）；
})（窗口、文件、https://someurl.js');

目前，我已经实现了如下连接： 使用脚本创建了一个组件

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 React，{Component}来自“React”
导出默认类脚本扩展组件{
componentDidMount（）{
const s=document.createElement（'script'）
//s.type='text/javascript'
s、 异步=真
s、 innerHTML=“document.write（'这是由document.write（）输出的！”）
s、 src=
'https://someurl.js' +
'?' +
（（Date.now（）/60000）0）
this.instance.appendChild
const h=document.getElementsByTagName（'script'）[0]
h、 parentNode.insertBefore（s，h）
}
render（）{
return（this.instance=el）}/>
}
}

并将其连接到应用程序的根目录

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

从“./Script”导入脚本
常量应用=（）=>{
返回(
)
}

这是可行的，但我认为这个解决方案不是最正确的。如果有人能帮助在反应式应用程序（react，vue）中正确运行外部脚本，我将非常感激。

---

提前谢谢

将其放在index.html中很好，也是最符合要求的方法

不这样做的唯一原因是：

嵌入脚本是有条件的-这取决于只有在React/Vue/etc.应用程序运行时才知道的内容。或者您想延迟嵌入

您正在将承诺之类的东西连接到脚本加载中，例如检查Bitrix聊天何时启动并运行

您需要将只有React/Vue/etc.app知道的值传递给脚本的嵌入（例如api键）

---

因为这里的情况似乎都不是这样，所以我会将其保存在index.html中。

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

不正确使用innerHTML会使您面临跨站点脚本（XSS）攻击。为显示而清理用户输入是出了名的容易出错，而未能正确清理是互联网上web漏洞的主要原因之一。你不应该真的依赖它。谢谢你的回答，早些时候我尝试了你描述的连接方法，但脚本没有运行该函数。@IgorNerovnyi不确定你所说的连接方法是什么意思？