Как правильно в react запустить стороний script?

104

16 апреля 2022, 22:10

У меня есть необходимость в 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

Есть специальная библиотека для управления head в рамках реакта. У вас будет примерно следующее:

    import React from 'react';
    import ReactDOM from 'react-dom';
    import {Helmet} from 'react-helmet';
    const App = () => {
       return(
          <React.Fragment>
            <App />
            <Helmet>
              <script async='true' src={'https://someurl.js?' + (Date.now() / 60000)} />  //тут не совсем понял: у вас почему-то вместо логического 'или' стояло побитовое (одна '|', а не две), во-первых, а во-вторых, зачем вы прописываете альтернативу делению, если тут в результате него всегда будет ненулевое значение
            </Helmet>
          </React.Fragment>
       )
    }