1

У меня есть необходимость в 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) буду очень признателен. заранее спасибо!!

1 ответ 1

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>
       )
    }
2
  • у вас почему-то вместо логического 'или' стояло побитовое (одна '|', а не две)....это скрипт, который генерирует битрикс. я не пишу руками эту часть кода. Спасибо за ваш ответ, я попробую библиотеку Helmet. 9 ноя 2020 в 8:46
  • Окей. Сейчас понял, что так можно округлять число в меньшую сторону - вероятно, быстрее, чем через Math. Не знал
    – artomich
    9 ноя 2020 в 8:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.