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

Question

I have a need in a React application to add a support chat made in bitrix - this is a script that is usually added to the index.html file. example script:

   <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>

At the moment, I have implemented the connection as follows: created a component with a 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)} />
  }
}

and connected it at the root of the application

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

It works, but I think this solution is not the most correct one. If Someone can help to run external script correctly in reactive applications (react, vue) I would be very grateful. thanks in advance!!

Answer 1

Putting it in index.html is fine and the most compliant approach.

The only reasons to not do that would be:

1. Embedding the script is conditional - it depends on something you only know as soon as the React/Vue/etc. app is running. Or you want to delay the embedding.
2. You're hooking something like a Promise into the loading of the script, for example checking when the Bitrix chat is up and running
3. You need to pass values only known to the React/Vue/etc. app to the embedding of the script (api key for example)

Since none of these seem to be the case here, I'd keep it in index.html.

Answer 2

我记得有一个叫做dangerousSetInnerHTML 的属性，你可以在React 官方网站上查找。